diff --git a/packages/vx-annotation/src/annotations/LinePath.js b/packages/vx-annotation/src/annotations/LinePath.js index 99fa8dfed..2d707310a 100644 --- a/packages/vx-annotation/src/annotations/LinePath.js +++ b/packages/vx-annotation/src/annotations/LinePath.js @@ -43,15 +43,11 @@ export default function LinePathAnnotation({ labelFontSize = 10, labelStroke = 'white', labelStrokeWidth = 3, - labelPaintOrder = 'stroke', + labelPaintOrder = 'stroke' }) { const endPoint = points[points.length - 1]; return ( - + - {label && + {label && ( {label} - } + )} ); } diff --git a/packages/vx-annotation/test/LinePathAnnotation.test.js b/packages/vx-annotation/test/LinePathAnnotation.test.js index a8ec87ec8..385ba5832 100644 --- a/packages/vx-annotation/test/LinePathAnnotation.test.js +++ b/packages/vx-annotation/test/LinePathAnnotation.test.js @@ -5,56 +5,63 @@ import { LinePathAnnotation } from '../src'; describe('', () => { test('it should be defined', () => { - expect(LinePathAnnotation).toBeDefined() - }) + expect(LinePathAnnotation).toBeDefined(); + }); test('it should be wrapped with defaults ', () => { - const wrapper = shallow() - expect(wrapper.prop('top')).toEqual(0) - expect(wrapper.prop('left')).toEqual(0) - expect(wrapper.is('.vx-line-path-annotation-group')).toBe(true) - }) + const wrapper = shallow(); + expect(wrapper.prop('top')).toEqual(0); + expect(wrapper.prop('left')).toEqual(0); + expect(wrapper.is('.vx-line-path-annotation-group')).toBe(true); + }); test('it should set wrapper props', () => { - const wrapper = shallow( - - ); - expect(wrapper.prop('top')).toEqual(20) - expect(wrapper.prop('left')).toEqual(300) - }) + const wrapper = shallow(); + expect(wrapper.prop('top')).toEqual(20); + expect(wrapper.prop('left')).toEqual(300); + }); test('it should contain a ', () => { - const wrapper = shallow() - expect(wrapper.find('.vx-line-path-annotation').length).toBe(1) - }) + const wrapper = shallow(); + expect(wrapper.find('.vx-line-path-annotation').length).toBe(1); + }); test('it should pass props to ', () => { - const points = [new Point({x: 0, y: 0})]; - const wrapper = shallow( - - ); + const points = [new Point({ x: 0, y: 0 })]; + const wrapper = shallow(); const linePath = wrapper.find('.vx-line-path-annotation'); - expect(linePath.prop('data')).toBe(points) - expect(linePath.prop('stroke')).toEqual('black') - expect(linePath.prop('strokeWidth')).toEqual(1) - expect(linePath.prop('className')).toEqual('vx-line-path-annotation test') - }) + expect(linePath.prop('data')).toBe(points); + expect(linePath.prop('stroke')).toEqual('black'); + expect(linePath.prop('strokeWidth')).toEqual(1); + expect(linePath.prop('className')).toEqual('vx-line-path-annotation test'); + }); test('it should not render a label if label prop is undefined', () => { - const wrapper = shallow() - expect(wrapper.prop('children').filter(c => !!c).length).toBe(1) - }) + const wrapper = shallow(); + expect(wrapper.prop('children').filter(c => !!c).length).toBe(1); + }); test('it should render a label if label prop is defined', () => { - const points = [new Point({x: 0, y: 0})]; - const wrapper = shallow() - expect(wrapper.prop('children').filter(c => !!c).length).toBe(2) - expect(wrapper.contains(test)).toBe(true) - }) -}) + const points = [new Point({ x: 0, y: 0 })]; + const wrapper = shallow(); + expect(wrapper.prop('children').filter(c => !!c).length).toBe(2); + expect( + wrapper.contains( + + test + + ) + ).toBe(true); + }); +}); diff --git a/packages/vx-annotation/test/enzyme-setup.js b/packages/vx-annotation/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-annotation/test/enzyme-setup.js +++ b/packages/vx-annotation/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-axis/src/axis/Axis.js b/packages/vx-axis/src/axis/Axis.js index cf6a8630c..371ba7b85 100644 --- a/packages/vx-axis/src/axis/Axis.js +++ b/packages/vx-axis/src/axis/Axis.js @@ -22,12 +22,7 @@ const propTypes = { labelProps: PropTypes.object, left: PropTypes.number, numTicks: PropTypes.number, - orientation: PropTypes.oneOf([ - ORIENT.top, - ORIENT.right, - ORIENT.bottom, - ORIENT.left, - ]), + orientation: PropTypes.oneOf([ORIENT.top, ORIENT.right, ORIENT.bottom, ORIENT.left]), rangePadding: PropTypes.number, scale: PropTypes.func.isRequired, stroke: PropTypes.string, @@ -42,7 +37,7 @@ const propTypes = { tickValues: PropTypes.array, tickComponent: PropTypes.func, top: PropTypes.number, - children: PropTypes.func, + children: PropTypes.func }; export default function Axis({ @@ -59,7 +54,7 @@ export default function Axis({ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, - fill: 'black', + fill: 'black' }, left = 0, numTicks = 10, @@ -75,14 +70,14 @@ export default function Axis({ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, - fill: 'black', + fill: 'black' }), tickLength = 8, tickStroke = 'black', tickTransform, tickValues, tickComponent, - top = 0, + top = 0 }) { let values = scale.ticks ? scale.ticks(numTicks) : scale.domain(); if (tickValues) values = tickValues; @@ -93,34 +88,27 @@ export default function Axis({ const range0 = range[0] + 0.5 - rangePadding; const range1 = range[range.length - 1] + 0.5 + rangePadding; - const horizontal = - orientation !== ORIENT.left && orientation !== ORIENT.right; + const horizontal = orientation !== ORIENT.left && orientation !== ORIENT.right; const isLeft = orientation === ORIENT.left; const isTop = orientation === ORIENT.top; const tickSign = isLeft || isTop ? -1 : 1; - const position = (scale.bandwidth ? center : identity)( - scale.copy(), - ); + const position = (scale.bandwidth ? center : identity)(scale.copy()); const axisFromPoint = new Point({ x: horizontal ? range0 : 0, - y: horizontal ? 0 : range0, + y: horizontal ? 0 : range0 }); const axisToPoint = new Point({ x: horizontal ? range1 : 0, - y: horizontal ? 0 : range1, + y: horizontal ? 0 : range1 }); let tickLabelFontSize = 10; // track the max tick label size to compute label offset if (!!children) { return ( - + {children({ axisFromPoint, axisToPoint, @@ -135,48 +123,41 @@ export default function Axis({ ticks: values.map((value, index) => { const from = new Point({ x: horizontal ? position(value) : 0, - y: horizontal ? 0 : position(value), + y: horizontal ? 0 : position(value) }); const to = new Point({ x: horizontal ? position(value) : tickSign * tickLength, - y: horizontal ? tickLength * tickSign : position(value), + y: horizontal ? tickLength * tickSign : position(value) }); return { value, index, from, to, - formattedValue: format(value, index), + formattedValue: format(value, index) }; - }), + }) })} ); } return ( - + {values.map((val, index) => { if (hideZero && val === 0) return null; const tickFromPoint = new Point({ x: horizontal ? position(val) : 0, - y: horizontal ? 0 : position(val), + y: horizontal ? 0 : position(val) }); const tickToPoint = new Point({ x: horizontal ? position(val) : tickSign * tickLength, - y: horizontal ? tickLength * tickSign : position(val), + y: horizontal ? tickLength * tickSign : position(val) }); const tickLabelPropsObj = tickLabelProps(val, index); - tickLabelFontSize = Math.max( - tickLabelFontSize, - tickLabelPropsObj.fontSize || 0, - ); + tickLabelFontSize = Math.max(tickLabelFontSize, tickLabelPropsObj.fontSize || 0); return ( - {!hideTicks && ( - - )} - {tickComponent ? tickComponent({ - x: tickToPoint.x, - y: tickToPoint.y + (horizontal && !isTop ? tickLabelFontSize : 0), - formattedValue: format(val, index), - ...tickLabelPropsObj - }) : ( + {!hideTicks && } + {tickComponent ? ( + tickComponent({ + x: tickToPoint.x, + y: tickToPoint.y + (horizontal && !isTop ? tickLabelFontSize : 0), + formattedValue: format(val, index), + ...tickLabelPropsObj + }) + ) : ( {format(val, index)} @@ -233,7 +206,7 @@ export default function Axis({ orientation, range, tickLabelFontSize, - tickLength, + tickLength })} {...labelProps} > diff --git a/packages/vx-axis/src/axis/AxisBottom.js b/packages/vx-axis/src/axis/AxisBottom.js index dd5093ce3..c0f9828fa 100644 --- a/packages/vx-axis/src/axis/AxisBottom.js +++ b/packages/vx-axis/src/axis/AxisBottom.js @@ -30,7 +30,7 @@ const propTypes = { tickValues: PropTypes.array, tickComponent: PropTypes.func, top: PropTypes.number, - children: PropTypes.func, + children: PropTypes.func }; export default function AxisBottom({ @@ -58,14 +58,14 @@ export default function AxisBottom({ fill: 'black', fontFamily: 'Arial', fontSize: 10, - textAnchor: 'middle', + textAnchor: 'middle' }), tickLength = 8, tickStroke, tickTransform, tickValues, tickComponent, - top, + top }) { return ( ', () => { @@ -39,13 +39,7 @@ describe('', () => { expect(args.tickFormat).toBeDefined(); expect(args.tickPosition).toBeDefined(); expect(args.ticks).toBeDefined(); - expect(Object.keys(args.ticks[0])).toEqual([ - 'value', - 'index', - 'from', - 'to', - 'formattedValue', - ]); + expect(Object.keys(args.ticks[0])).toEqual(['value', 'index', 'from', 'to', 'formattedValue']); }); test('it should set user-specified axisClassName, axisLineClassName, labelClassName, and tickClassName', () => { @@ -61,28 +55,22 @@ describe('', () => { axisLineClassName={axisLineClassName} labelClassName={labelClassName} tickClassName={tickClassName} - />, + /> ).dive(); expect(wrapper.find(`.${axisClassName}`).length).toBe(1); expect(wrapper.find(`.${axisLineClassName}`).length).toBe(1); expect(wrapper.find(`.${labelClassName}`).length).toBe(1); - expect(wrapper.find(`.${tickClassName}`).length).toBeGreaterThan( - 0, - ); + expect(wrapper.find(`.${tickClassName}`).length).toBeGreaterThan(0); }); test('it should pass the output of tickLabelProps to tick labels', () => { const tickProps = { fontSize: 50, fill: 'magenta' }; - const wrapper = shallow( - tickProps} />, - ); + const wrapper = shallow( tickProps} />); const ticks = wrapper.find('.vx-axis-tick'); ticks.forEach(tick => { - expect(tick.find(Text).props()).toEqual( - expect.objectContaining(tickProps), - ); + expect(tick.find(Text).props()).toEqual(expect.objectContaining(tickProps)); }); expect.hasAssertions(); @@ -97,7 +85,7 @@ describe('', () => { expect(index).toBeGreaterThan(-1); return {}; }} - />, + /> ); expect.hasAssertions(); @@ -105,14 +93,10 @@ describe('', () => { test('it should pass labelProps to the axis label', () => { const labelProps = { fontSize: 50, fill: 'magenta' }; - const wrapper = shallow( - , - ); + const wrapper = shallow(); const label = wrapper.find('.vx-axis-label'); - expect(label.find(Text).props()).toEqual( - expect.objectContaining(labelProps), - ); + expect(label.find(Text).props()).toEqual(expect.objectContaining(labelProps)); }); test('it should render the 0th tick if hideZero is false', () => { @@ -121,7 +105,7 @@ describe('', () => { wrapper .find('.vx-axis-tick') .at(0) - .key(), + .key() ).toBe('vx-tick-0-0'); }); @@ -131,19 +115,17 @@ describe('', () => { wrapper .find('.vx-axis-tick') .at(0) - .key(), + .key() ).toBe('vx-tick-1-1'); }); test('it should SHOW an axis line if hideAxisLine is false', () => { - const wrapper = shallow( - , - ); + const wrapper = shallow(); expect( wrapper .children() .not('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBe(1); }); @@ -153,19 +135,17 @@ describe('', () => { wrapper .children() .not('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBe(0); }); test('it should SHOW ticks if hideTicks is false', () => { - const wrapper = shallow( - , - ); + const wrapper = shallow(); expect( wrapper .children() .find('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBeGreaterThan(0); }); @@ -175,7 +155,7 @@ describe('', () => { wrapper .children() .find('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBe(0); }); @@ -185,7 +165,7 @@ describe('', () => { wrapper .children() .find('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBe(0); wrapper = shallow(); @@ -193,27 +173,21 @@ describe('', () => { wrapper .children() .find('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBe(1); - wrapper = shallow( - , - ); + wrapper = shallow(); expect( wrapper .children() .find('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBe(7); }); test('it should use tickFormat to format ticks if passed', () => { const wrapper = shallow( - 'test!!!'} - />, + 'test!!!'} /> ); expect( wrapper @@ -225,13 +199,7 @@ describe('', () => { }); test('tickFormat should have access to tick index', () => { - const wrapper = shallow( - i} - />, - ); + const wrapper = shallow( i} />); expect( wrapper .children() @@ -245,22 +213,19 @@ describe('', () => { const axisProps = { scale: scaleBand({ rangeRound: [10, 0], - domain: [0, 10], + domain: [0, 10] }) }; - const wrapper = shallow( - - ) - const points = wrapper.children().find(Line) + const wrapper = shallow(); + const points = wrapper.children().find(Line); // First point - expect(points.at(0).prop('from')).toEqual({x: 8, y: 0}) - expect(points.at(0).prop('to')).toEqual({x: 8, y: 8}) + expect(points.at(0).prop('from')).toEqual({ x: 8, y: 0 }); + expect(points.at(0).prop('to')).toEqual({ x: 8, y: 8 }); // Second point - expect(points.at(1).prop('from')).toEqual({x: 3, y: 0}) - expect(points.at(1).prop('to')).toEqual({x: 3, y: 8}) + expect(points.at(1).prop('from')).toEqual({ x: 3, y: 0 }); + expect(points.at(1).prop('to')).toEqual({ x: 3, y: 8 }); // Third point - expect(points.at(2).prop('from')).toEqual({x: 10.5, y: 0}) - expect(points.at(2).prop('to')).toEqual({x: 0.5, y: 0}) - }) - + expect(points.at(2).prop('from')).toEqual({ x: 10.5, y: 0 }); + expect(points.at(2).prop('to')).toEqual({ x: 0.5, y: 0 }); + }); }); diff --git a/packages/vx-axis/test/AxisBottom.test.js b/packages/vx-axis/test/AxisBottom.test.js index 13a03a4cd..132fdf1cc 100644 --- a/packages/vx-axis/test/AxisBottom.test.js +++ b/packages/vx-axis/test/AxisBottom.test.js @@ -6,8 +6,8 @@ import { scaleLinear } from '../../vx-scale'; const axisProps = { scale: scaleLinear({ rangeRound: [10, 0], - domain: [0, 10], - }), + domain: [0, 10] + }) }; describe('', () => { diff --git a/packages/vx-axis/test/AxisLeft.test.js b/packages/vx-axis/test/AxisLeft.test.js index 3b4040b2c..3f6a7bd0f 100644 --- a/packages/vx-axis/test/AxisLeft.test.js +++ b/packages/vx-axis/test/AxisLeft.test.js @@ -6,8 +6,8 @@ import { scaleLinear } from '../../vx-scale'; const axisProps = { scale: scaleLinear({ rangeRound: [10, 0], - domain: [0, 10], - }), + domain: [0, 10] + }) }; describe('', () => { diff --git a/packages/vx-axis/test/AxisRight.test.js b/packages/vx-axis/test/AxisRight.test.js index 3ffb79909..8eba79b59 100644 --- a/packages/vx-axis/test/AxisRight.test.js +++ b/packages/vx-axis/test/AxisRight.test.js @@ -6,8 +6,8 @@ import { scaleLinear } from '../../vx-scale'; const axisProps = { scale: scaleLinear({ rangeRound: [10, 0], - domain: [0, 10], - }), + domain: [0, 10] + }) }; describe('', () => { diff --git a/packages/vx-axis/test/AxisTop.test.js b/packages/vx-axis/test/AxisTop.test.js index 11c7ef0b5..24c415f45 100644 --- a/packages/vx-axis/test/AxisTop.test.js +++ b/packages/vx-axis/test/AxisTop.test.js @@ -6,8 +6,8 @@ import { scaleLinear } from '../../vx-scale'; const axisProps = { scale: scaleLinear({ rangeRound: [10, 0], - domain: [0, 10], - }), + domain: [0, 10] + }) }; describe('', () => { @@ -71,4 +71,4 @@ describe('', () => { const text = wrapper.find('.vx-axis-label'); expect(text.prop('children')).toEqual(label); }); -}) +}); diff --git a/packages/vx-axis/test/enzyme-setup.js b/packages/vx-axis/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-axis/test/enzyme-setup.js +++ b/packages/vx-axis/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-bounds/src/enhancers/withBoundingRects.js b/packages/vx-bounds/src/enhancers/withBoundingRects.js index 433523020..8ee90340a 100644 --- a/packages/vx-bounds/src/enhancers/withBoundingRects.js +++ b/packages/vx-bounds/src/enhancers/withBoundingRects.js @@ -9,7 +9,7 @@ const emptyRect = { bottom: 0, left: 0, width: 0, - height: 0, + height: 0 }; const rectShape = PropTypes.shape({ @@ -18,13 +18,13 @@ const rectShape = PropTypes.shape({ bottom: PropTypes.number.isRequired, left: PropTypes.number.isRequired, width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, + height: PropTypes.number.isRequired }); export const withBoundingRectsProps = { getRects: PropTypes.func, rect: rectShape, - parentRect: rectShape, + parentRect: rectShape }; export default function withBoundingRects(BaseComponent) { @@ -33,7 +33,7 @@ export default function withBoundingRects(BaseComponent) { super(props); this.state = { rect: undefined, - parentRect: undefined, + parentRect: undefined }; this.getRects = this.getRects.bind(this); } @@ -49,25 +49,18 @@ export default function withBoundingRects(BaseComponent) { const node = this.node; const parentNode = this.node.parentNode; - const rect = node.getBoundingClientRect - ? node.getBoundingClientRect() - : emptyRect; + const rect = node.getBoundingClientRect ? node.getBoundingClientRect() : emptyRect; - const parentRect = parentNode && parentNode.getBoundingClientRect - ? parentNode.getBoundingClientRect() - : emptyRect; + const parentRect = + parentNode && parentNode.getBoundingClientRect + ? parentNode.getBoundingClientRect() + : emptyRect; return { rect, parentRect }; } render() { - return ( - - ); + return ; } } diff --git a/packages/vx-bounds/src/index.js b/packages/vx-bounds/src/index.js index 34cbdf23c..b48725f25 100644 --- a/packages/vx-bounds/src/index.js +++ b/packages/vx-bounds/src/index.js @@ -1 +1,4 @@ -export { default as withBoundingRects, withBoundingRectsProps } from './enhancers/withBoundingRects'; +export { + default as withBoundingRects, + withBoundingRectsProps +} from './enhancers/withBoundingRects'; diff --git a/packages/vx-bounds/test/enzyme-setup.js b/packages/vx-bounds/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-bounds/test/enzyme-setup.js +++ b/packages/vx-bounds/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-bounds/test/withBoundingRects.test.js b/packages/vx-bounds/test/withBoundingRects.test.js index ae3dd1dde..0676ca935 100644 --- a/packages/vx-bounds/test/withBoundingRects.test.js +++ b/packages/vx-bounds/test/withBoundingRects.test.js @@ -9,7 +9,7 @@ const expectedRectShape = expect.objectContaining({ bottom: expect.any(Number), left: expect.any(Number), width: expect.any(Number), - height: expect.any(Number), + height: expect.any(Number) }); describe('withBoundingRects()', () => { @@ -21,7 +21,7 @@ describe('withBoundingRects()', () => { top: 0, left: 0, bottom: 0, - right: 0, + right: 0 })); }); diff --git a/packages/vx-boxplot/src/boxplots/BoxPlot.js b/packages/vx-boxplot/src/boxplots/BoxPlot.js index c2ba4c1bf..ac16df43a 100644 --- a/packages/vx-boxplot/src/boxplots/BoxPlot.js +++ b/packages/vx-boxplot/src/boxplots/BoxPlot.js @@ -114,7 +114,7 @@ export default function BoxPlot({ x2: centerX + boxWidth / 4 })} /> - {container && + {container && ( } + /> + )} ); } diff --git a/packages/vx-boxplot/test/enzyme-setup.js b/packages/vx-boxplot/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-boxplot/test/enzyme-setup.js +++ b/packages/vx-boxplot/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-brush/src/brushes/BoxBrush.js b/packages/vx-brush/src/brushes/BoxBrush.js index ed3441681..2f79b5078 100644 --- a/packages/vx-brush/src/brushes/BoxBrush.js +++ b/packages/vx-brush/src/brushes/BoxBrush.js @@ -1,14 +1,14 @@ import React from 'react'; import cx from 'classnames'; -export default (props) => { +export default props => { const { brush, className, - fill = "rgba(102, 181, 245, 0.1)", - stroke = "rgba(102, 181, 245, 1)", + fill = 'rgba(102, 181, 245, 0.1)', + stroke = 'rgba(102, 181, 245, 1)', strokeWidth = 1, - ...otherProps, + ...otherProps } = props; const { start, end, isBrushing } = brush; if (!start) return null; @@ -18,8 +18,8 @@ export default (props) => { const width = Math.abs(start.x - end.x); const height = Math.abs(start.y - end.y); return ( - - {isBrushing && + + {isBrushing && ( { height={height} {...otherProps} /> - } + )} ); -} +}; diff --git a/packages/vx-brush/src/enhancers/withBrush.js b/packages/vx-brush/src/enhancers/withBrush.js index e9594c1de..6e6eddf08 100644 --- a/packages/vx-brush/src/enhancers/withBrush.js +++ b/packages/vx-brush/src/enhancers/withBrush.js @@ -6,27 +6,27 @@ export default compose( start: undefined, end: undefined, domain: undefined, - isBrushing: false, + isBrushing: false }), withHandlers({ onBrushStart: ({ updateBrush }) => ({ x, y }) => { - updateBrush((prevState) => ({ + updateBrush(prevState => ({ ...prevState, start: { x, y }, isBrushing: true, end: undefined, - domain: undefined, + domain: undefined })); }, onBrushDrag: ({ updateBrush }) => ({ x, y }) => { - updateBrush((prevState) => ({ + updateBrush(prevState => ({ ...prevState, end: { x, y }, - domain: undefined, + domain: undefined })); }, onBrushEnd: ({ updateBrush }) => ({ x, y }) => { - updateBrush((prevState) => { + updateBrush(prevState => { const { start } = prevState; return { ...prevState, @@ -35,17 +35,17 @@ export default compose( x0: Math.min(start.x, x), x1: Math.max(start.x, x), y0: Math.min(start.y, y), - y1: Math.max(start.y, y), + y1: Math.max(start.y, y) } - } + }; }); }, onBrushReset: ({ updateBrush }) => event => { - updateBrush((prevState) => ({ + updateBrush(prevState => ({ start: undefined, end: undefined, domain: undefined, - isBrushing: false, + isBrushing: false })); } }) diff --git a/packages/vx-brush/src/utils/constrainToRegion.js b/packages/vx-brush/src/utils/constrainToRegion.js index b61cb9cd2..db059a234 100644 --- a/packages/vx-brush/src/utils/constrainToRegion.js +++ b/packages/vx-brush/src/utils/constrainToRegion.js @@ -2,6 +2,6 @@ export default function constrainToRegion({ region, x, y }) { const { x0, x1, y0, y1 } = region; return { x: x < x0 ? x0 : x > x1 ? x1 : x, - y: y < y0 ? y0 : y > y1 ? y1 : y, - } + y: y < y0 ? y0 : y > y1 ? y1 : y + }; } diff --git a/packages/vx-brush/test/BoxBrush.test.js b/packages/vx-brush/test/BoxBrush.test.js index 100039514..e784aaaa1 100644 --- a/packages/vx-brush/test/BoxBrush.test.js +++ b/packages/vx-brush/test/BoxBrush.test.js @@ -2,6 +2,6 @@ import { BoxBrush } from '../src'; describe('', () => { test('it should be defined', () => { - expect(BoxBrush).toBeDefined() - }) -}) + expect(BoxBrush).toBeDefined(); + }); +}); diff --git a/packages/vx-brush/test/enzyme-setup.js b/packages/vx-brush/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-brush/test/enzyme-setup.js +++ b/packages/vx-brush/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-clip-path/src/clip-paths/CircleClipPath.js b/packages/vx-clip-path/src/clip-paths/CircleClipPath.js index 68a439d5e..1ba83487a 100644 --- a/packages/vx-clip-path/src/clip-paths/CircleClipPath.js +++ b/packages/vx-clip-path/src/clip-paths/CircleClipPath.js @@ -1,20 +1,8 @@ import React from 'react'; import ClipPath from './ClipPath'; -export default ({ - id, - cx, - cy, - r, - ...restProps, -}) => ( +export default ({ id, cx, cy, r, ...restProps }) => ( - + ); - diff --git a/packages/vx-clip-path/src/clip-paths/ClipPath.js b/packages/vx-clip-path/src/clip-paths/ClipPath.js index 021072048..33e661e6b 100644 --- a/packages/vx-clip-path/src/clip-paths/ClipPath.js +++ b/packages/vx-clip-path/src/clip-paths/ClipPath.js @@ -1,10 +1,6 @@ import React from 'react'; -export default ({ - id, - children, - ...restProps -}) => ( +export default ({ id, children, ...restProps }) => ( {children} diff --git a/packages/vx-clip-path/src/clip-paths/RectClipPath.js b/packages/vx-clip-path/src/clip-paths/RectClipPath.js index 68413cd10..3ddee464d 100644 --- a/packages/vx-clip-path/src/clip-paths/RectClipPath.js +++ b/packages/vx-clip-path/src/clip-paths/RectClipPath.js @@ -1,21 +1,8 @@ import React from 'react'; import ClipPath from './ClipPath'; -export default ({ - id, - x = 0, - y = 0, - width = 1, - height = 1, - ...restProps, -}) => ( +export default ({ id, x = 0, y = 0, width = 1, height = 1, ...restProps }) => ( - + ); diff --git a/packages/vx-clip-path/test/ClipPaths.test.js b/packages/vx-clip-path/test/ClipPaths.test.js index a3b482477..d4bc69371 100644 --- a/packages/vx-clip-path/test/ClipPaths.test.js +++ b/packages/vx-clip-path/test/ClipPaths.test.js @@ -1,10 +1,6 @@ import React from 'react'; -import { - ClipPath, - CircleClipPath, - RectClipPath, -} from '../src'; +import { ClipPath, CircleClipPath, RectClipPath } from '../src'; import { shallow } from 'enzyme'; @@ -20,7 +16,7 @@ describe('', () => { }); test('it should assign the passed id to the clipPath', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find('clipPath#best_clip').length).toBe(1); }); }); diff --git a/packages/vx-clip-path/test/enzyme-setup.js b/packages/vx-clip-path/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-clip-path/test/enzyme-setup.js +++ b/packages/vx-clip-path/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-curve/src/index.js b/packages/vx-curve/src/index.js index b9ac46cfa..ab9239d20 100644 --- a/packages/vx-curve/src/index.js +++ b/packages/vx-curve/src/index.js @@ -16,5 +16,5 @@ export { curveCatmullRomOpen, curveMonotoneX, curveMonotoneY, - curveNatural, + curveNatural } from 'd3-shape'; diff --git a/packages/vx-curve/test/curve.test.js b/packages/vx-curve/test/curve.test.js index 6f3b6c5f5..81e6db02f 100644 --- a/packages/vx-curve/test/curve.test.js +++ b/packages/vx-curve/test/curve.test.js @@ -16,77 +16,77 @@ import { curveCatmullRomOpen, curveMonotoneX, curveMonotoneY, - curveNatural, + curveNatural } from '../src'; test('curveBasis', () => { - expect(curveBasis).toBeDefined() -}) + expect(curveBasis).toBeDefined(); +}); test('curveBasisClosed', () => { - expect(curveBasisClosed).toBeDefined() -}) + expect(curveBasisClosed).toBeDefined(); +}); test('curveBasisOpen', () => { - expect(curveBasisOpen).toBeDefined() -}) + expect(curveBasisOpen).toBeDefined(); +}); test('curveStep', () => { - expect(curveStep).toBeDefined() -}) + expect(curveStep).toBeDefined(); +}); test('curveStepAfter', () => { - expect(curveStepAfter).toBeDefined() -}) + expect(curveStepAfter).toBeDefined(); +}); test('curveStepBefore', () => { - expect(curveStepBefore).toBeDefined() -}) + expect(curveStepBefore).toBeDefined(); +}); test('curveBundle', () => { - expect(curveBundle).toBeDefined() -}) + expect(curveBundle).toBeDefined(); +}); test('curveLinear', () => { - expect(curveLinear).toBeDefined() -}) + expect(curveLinear).toBeDefined(); +}); test('curveLinearClosed', () => { - expect(curveLinearClosed).toBeDefined() -}) + expect(curveLinearClosed).toBeDefined(); +}); test('curveCardinal', () => { - expect(curveCardinal).toBeDefined() -}) + expect(curveCardinal).toBeDefined(); +}); test('curveCardinalClosed', () => { - expect(curveCardinalClosed).toBeDefined() -}) + expect(curveCardinalClosed).toBeDefined(); +}); test('curveCardinalOpen', () => { - expect(curveCardinalOpen).toBeDefined() -}) + expect(curveCardinalOpen).toBeDefined(); +}); test('curveCatmullRom', () => { - expect(curveCatmullRom).toBeDefined() -}) + expect(curveCatmullRom).toBeDefined(); +}); test('curveCatmullRomClosed', () => { - expect(curveCatmullRomClosed).toBeDefined() -}) + expect(curveCatmullRomClosed).toBeDefined(); +}); test('curveCatmullRomOpen', () => { - expect(curveCatmullRomOpen).toBeDefined() -}) + expect(curveCatmullRomOpen).toBeDefined(); +}); test('curveMonotoneX', () => { - expect(curveMonotoneX).toBeDefined() -}) + expect(curveMonotoneX).toBeDefined(); +}); test('curveMonotoneY', () => { - expect(curveMonotoneY).toBeDefined() -}) + expect(curveMonotoneY).toBeDefined(); +}); test('curveNatural', () => { - expect(curveNatural).toBeDefined() -}) + expect(curveNatural).toBeDefined(); +}); diff --git a/packages/vx-curve/test/enzyme-setup.js b/packages/vx-curve/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-curve/test/enzyme-setup.js +++ b/packages/vx-curve/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-demo/components/charts/BrushChart.js b/packages/vx-demo/components/charts/BrushChart.js index 57054e991..8c15a122a 100644 --- a/packages/vx-demo/components/charts/BrushChart.js +++ b/packages/vx-demo/components/charts/BrushChart.js @@ -3,12 +3,7 @@ import { genRandomNormalPoints } from '@vx/mock-data'; import { scaleLinear } from '@vx/scale'; import { Group } from '@vx/group'; import { AxisLeft, AxisBottom } from '@vx/axis'; -import { - BoxBrush, - withBrush, - getCoordsFromEvent, - constrainToRegion -} from '@vx/brush'; +import { BoxBrush, withBrush, getCoordsFromEvent, constrainToRegion } from '@vx/brush'; import colors from '../util/sillyColorScale'; import { Motion, spring } from 'react-motion'; @@ -23,7 +18,7 @@ class BrushChart extends React.Component { x0: margin.left, x1: width - margin.left, y0: margin.top, - y1: height - margin.top, + y1: height - margin.top }; this.initialDomain = { @@ -34,13 +29,13 @@ class BrushChart extends React.Component { this.xScale = scaleLinear({ domain: this.initialDomain.x, range: [0, width - margin.left - margin.right], - clamp: true, + clamp: true }); this.yScale = scaleLinear({ domain: this.initialDomain.y, range: [height - margin.top - margin.bottom, 0], - clamp: true, + clamp: true }); this.handleMouseDown = this.handleMouseDown.bind(this); @@ -102,7 +97,9 @@ class BrushChart extends React.Component { return ( { this.svg = c; }} + ref={c => { + this.svg = c; + }} width={width} height={height} onMouseDown={this.handleMouseDown} @@ -126,15 +123,16 @@ class BrushChart extends React.Component { tickTextFill={'#1b1a1e'} /> - {points.map((point) => { + {points.map(point => { return ( + y: spring(yScale(y(point))) + }} + > {interpolatingStyle => { return ( k !== 'date'); // rawData => [{id: "", values: [{ date, temperature }]}, ...] -const data = cityNames.map((cityName) => { +const data = cityNames.map(cityName => { return { id: cityName, - values: rawData.map((d) => ({ + values: rawData.map(d => ({ date: d.date, - temperature: d[cityName], - })), - } + temperature: d[cityName] + })) + }; }); // utils -const getCity = (cityId) => data.find((city) => city.id === cityId); +const getCity = cityId => data.find(city => city.id === cityId); const addCity = (selected, cityId) => selected.concat(cityId); -const removeCity = (selected, cityId) => selected.filter((city) => city !== cityId); +const removeCity = (selected, cityId) => selected.filter(city => city !== cityId); const removeCityOrResetSelected = (selected, cityId) => { let nextSelected = removeCity(selected, cityId); if (nextSelected.length === 0) nextSelected = initialSelectedState; return nextSelected; -} +}; // recompose higher-order function for state and event handlers const initialSelectedState = cityNames; @@ -54,98 +54,81 @@ const withSelected = compose( ); // the chart -export default withSelected(({ - selected, - updateSelected, - resetSelected, - width, - height, - margin, -}) => { - // bounds - const xMax = width - margin.left - margin.right; - const yMax = height - margin.top - margin.bottom; +export default withSelected( + ({ selected, updateSelected, resetSelected, width, height, margin }) => { + // bounds + const xMax = width - margin.left - margin.right; + const yMax = height - margin.top - margin.bottom; - // accessors - const x = d => parseDate(d.date); - const y = d => +d.temperature; + // accessors + const x = d => parseDate(d.date); + const y = d => +d.temperature; - // scales - const xScale = scaleTime({ - range: [0, xMax], - domain: extent(rawData, x), - }); - const yScale = scaleLinear({ - range: [yMax, 0], - domain: extent(selected.slice().reduce((ret, c) => { - return ret.concat(getCity(c).values) - }, []), y) - }); - const color = scaleOrdinal({ - range: ['#3b99d8', '#239f85', '#9a5cb4'], - domain: cityNames, - }); + // scales + const xScale = scaleTime({ + range: [0, xMax], + domain: extent(rawData, x) + }); + const yScale = scaleLinear({ + range: [yMax, 0], + domain: extent( + selected.slice().reduce((ret, c) => { + return ret.concat(getCity(c).values); + }, []), + y + ) + }); + const color = scaleOrdinal({ + range: ['#3b99d8', '#239f85', '#9a5cb4'], + domain: cityNames + }); - return ( - - - - - {selected.map(getCity).map(({ id, values }) => { - const lastDatum = values[values.length - 1]; - return ( - - - - {id} - - - ); - })} - - - - ); -}); + return ( + + + + + {selected.map(getCity).map(({ id, values }) => { + const lastDatum = values[values.length - 1]; + return ( + + + + {id} + + + ); + })} + + + + ); + } +); -const Legend = ({ - data, - selected, - updateSelected, - xMax, - yMax, - color, -}) => { +const Legend = ({ data, selected, updateSelected, xMax, yMax, color }) => { const margin = 20; const xPadding = 60; const yPadding = 30; @@ -165,7 +148,7 @@ const Legend = ({ fillOpacity={selected.includes(id) ? 1 : 0.5} > - + {id} @@ -173,8 +156,10 @@ const Legend = ({ })} ); -} +}; diff --git a/packages/vx-demo/components/charts/SimpleAreaChart.js b/packages/vx-demo/components/charts/SimpleAreaChart.js index 23713221f..46c4c16bf 100644 --- a/packages/vx-demo/components/charts/SimpleAreaChart.js +++ b/packages/vx-demo/components/charts/SimpleAreaChart.js @@ -20,12 +20,7 @@ function numTicksForWidth(width) { return 10; } -export default ({ - margin, - data, - width, - height, -}) => { +export default ({ margin, data, width, height }) => { const stock = appleStock; // bounds @@ -39,12 +34,12 @@ export default ({ // scales const xStockScale = scaleTime({ range: [0, xMax], - domain: extent(stock, xStock), + domain: extent(stock, xStock) }); const yStockScale = scaleLinear({ range: [yMax, 0], domain: [0, max(stock, yStock)], - nice: true, + nice: true }); return ( @@ -87,4 +82,4 @@ export default ({ /> ); -} +}; diff --git a/packages/vx-demo/components/charts/SimpleBar.js b/packages/vx-demo/components/charts/SimpleBar.js index ed5915d2d..a62c7c4fe 100644 --- a/packages/vx-demo/components/charts/SimpleBar.js +++ b/packages/vx-demo/components/charts/SimpleBar.js @@ -13,11 +13,7 @@ function round(value, precision) { return Math.round(value * multiplier) / multiplier; } -export default ({ - width, - height, - margin, -}) => { +export default ({ width, height, margin }) => { // accessors const x = d => d.letter; const y = d => +d.frequency * 100; @@ -30,11 +26,11 @@ export default ({ const xScale = scaleBand({ rangeRound: [0, xMax], domain: data.map(x), - padding: 0.4, + padding: 0.4 }); const yScale = scaleLinear({ rangeRound: [yMax, 0], - domain: [0, max(data, y)], + domain: [0, max(data, y)] }); return ( @@ -60,23 +56,10 @@ export default ({ stroke={'black'} strokeWidth={1} /> - + {`${round(y(d))}%`} - + {x(d)} @@ -84,4 +67,4 @@ export default ({ })} ); -} +}; diff --git a/packages/vx-demo/components/charts/SimpleLineChart.js b/packages/vx-demo/components/charts/SimpleLineChart.js index dfec400ea..1f7ee2cf1 100644 --- a/packages/vx-demo/components/charts/SimpleLineChart.js +++ b/packages/vx-demo/components/charts/SimpleLineChart.js @@ -27,16 +27,11 @@ function numTicksForWidth(width) { return 10; } -export default ({ - margin, - dataset, - width, - height, -}) => { +export default ({ margin, dataset, width, height }) => { if (!Array.isArray(dataset)) dataset = [dataset]; const allData = dataset.reduce((rec, d) => { - return rec.concat(d.data) + return rec.concat(d.data); }, []); // bounds @@ -51,12 +46,12 @@ export default ({ const xScale = scaleTime({ range: [0, xMax], domain: extent(allData, x), - nice: true, + nice: true }); const yScale = scaleLinear({ range: [yMax, 0], domain: [0, max(allData, y)], - nice: true, + nice: true }); const yFormat = yScale.tickFormat ? yScale.tickFormat() : identity; @@ -66,28 +61,28 @@ export default ({ const markerLabel = `Deploy`; const markerFrom = new Point({ x: xScale(x(markerDatum)), - y: 0, + y: 0 }); const markerTo = new Point({ x: xScale(x(markerDatum)), - y: yMax, + y: yMax }); const annotationPoint = new Point({ x: xScale(x(allData[3])), - y: yScale(y(allData[3])), + y: yScale(y(allData[3])) }); return ( - - + + - - + + - + @@ -175,4 +167,4 @@ export default ({ /> ); -} +}; diff --git a/packages/vx-demo/components/charts/SimpleLineWithGlyphsChart.js b/packages/vx-demo/components/charts/SimpleLineWithGlyphsChart.js index df347a352..de552593e 100644 --- a/packages/vx-demo/components/charts/SimpleLineWithGlyphsChart.js +++ b/packages/vx-demo/components/charts/SimpleLineWithGlyphsChart.js @@ -26,16 +26,11 @@ function numTicksForWidth(width) { return 10; } -export default ({ - margin, - dataset, - width, - height, -}) => { +export default ({ margin, dataset, width, height }) => { if (!Array.isArray(dataset)) dataset = [dataset]; const allData = dataset.reduce((rec, d) => { - return rec.concat(d.data) + return rec.concat(d.data); }, []); // bounds @@ -49,13 +44,13 @@ export default ({ // scales const xScale = scaleTime({ range: [0, xMax], - domain: extent(allData, x), + domain: extent(allData, x) }); const yScale = scaleLinear({ range: [yMax, 0], domain: [0, max(allData, y)], nice: true, - clamp: true, + clamp: true }); const yFormat = yScale.tickFormat ? yScale.tickFormat() : identity; @@ -70,10 +65,7 @@ export default ({ label={'value'} hideZero /> - + { return ( - ); -} +}; diff --git a/packages/vx-demo/components/charts/StackedAreaChart.js b/packages/vx-demo/components/charts/StackedAreaChart.js index c69c3b4c8..a1e17cf9e 100644 --- a/packages/vx-demo/components/charts/StackedAreaChart.js +++ b/packages/vx-demo/components/charts/StackedAreaChart.js @@ -13,17 +13,9 @@ import colorScale from '../util/sillyColorScale'; import withState from 'recompose/withState'; import compose from 'recompose/compose'; -const enhance = compose( - withState('selected', 'updateSelected', []) -); +const enhance = compose(withState('selected', 'updateSelected', [])); -export default enhance(({ - margin, - width, - height, - selected, - updateSelected, -}) => { +export default enhance(({ margin, width, height, selected, updateSelected }) => { const data = browserUsage; const keys = Object.keys(data[0]).filter(k => k !== 'date'); const browserNames = [...keys].reverse(); @@ -31,17 +23,17 @@ export default enhance(({ const yMax = height - margin.top - margin.bottom; const xMax = width - margin.left - margin.right; - const parseDate = timeParse("%Y %b %d"); + const parseDate = timeParse('%Y %b %d'); const x = d => parseDate(d.date); const stack = d3stack().keys(keys); const xScale = scaleTime({ range: [0, xMax], - domain: extent(data, x), + domain: extent(data, x) }); const yScale = scaleLinear({ - range: [yMax, 0], + range: [yMax, 0] }); return ( @@ -50,7 +42,7 @@ export default enhance(({ top={margin.top} left={margin.left} scale={yScale} - tickFormat={(v) => `${round(v * 100)}%`} + tickFormat={v => `${round(v * 100)}%`} label={'browser market share (%)'} stroke={'#1b1a1e'} tickTextFill={'#000'} @@ -62,48 +54,50 @@ export default enhance(({ left={margin.left} keys={keys} data={data} - x={(d) => xScale(x(d.data))} - y0={(d) => yScale(d[0] / 100)} - y1={(d) => yScale(d[1] / 100)} - stroke={(d,i) => colorScale(i)} + x={d => xScale(x(d.data))} + y0={d => yScale(d[0] / 100)} + y1={d => yScale(d[1] / 100)} + stroke={(d, i) => colorScale(i)} strokeWidth={1} - fillOpacity={(d,i) => selected.includes(browserNames[i]) ? 0.8 : 0.2} - fill={(d,i) => colorScale(i)} + fillOpacity={(d, i) => (selected.includes(browserNames[i]) ? 0.8 : 0.2)} + fill={(d, i) => colorScale(i)} onMouseEnter={(d, i) => event => { - updateSelected((prevState) => ([browserNames[i]])) + updateSelected(prevState => [browserNames[i]]); }} - onMouseLeave={(d,i) => event => { + onMouseLeave={(d, i) => event => { updateSelected(prevState => { if (prevState.includes(browserNames[i])) return []; return prevState; - }) + }); }} /> - {stack(data).reverse().map((series,i) => { - const lastPoint = series[series.length - 1]; - const lastPointY0 = lastPoint[0] / 100; - const lastPointY1 = lastPoint[1] / 100; + {stack(data) + .reverse() + .map((series, i) => { + const lastPoint = series[series.length - 1]; + const lastPointY0 = lastPoint[0] / 100; + const lastPointY1 = lastPoint[1] / 100; - return ( - - {lastPointY1 - lastPointY0 > 0.01 && - - {series.key} - - } - - ); - })} + return ( + + {lastPointY1 - lastPointY0 > 0.01 && ( + + {series.key} + + )} + + ); + })} ); -}) +}); diff --git a/packages/vx-demo/components/charts/VoronoiChart.js b/packages/vx-demo/components/charts/VoronoiChart.js index 9400673cd..9028262c9 100644 --- a/packages/vx-demo/components/charts/VoronoiChart.js +++ b/packages/vx-demo/components/charts/VoronoiChart.js @@ -10,11 +10,15 @@ import { voronoi, VoronoiPolygon } from '@vx/voronoi'; const neighborRadius = 75; -const data = Array(200).fill(null).map(() => ({ - x: Math.random(), - y: Math.random(), - id: Math.random().toString(36).slice(2), -})); +const data = Array(200) + .fill(null) + .map(() => ({ + x: Math.random(), + y: Math.random(), + id: Math.random() + .toString(36) + .slice(2) + })); class VoronoiChart extends React.PureComponent { static getUpdatedState(props) { @@ -24,19 +28,19 @@ class VoronoiChart extends React.PureComponent { const xScale = scaleLinear({ domain: extent(data, d => d.x), - range: [0, innerWidth], + range: [0, innerWidth] }); const yScale = scaleLinear({ domain: extent(data, d => d.y), - range: [innerHeight, 0], + range: [innerHeight, 0] }); const voronoiDiagram = voronoi({ x: d => xScale(d.x), y: d => yScale(d.y), width: innerWidth, - height: innerHeight, + height: innerHeight })(data); return { @@ -46,7 +50,7 @@ class VoronoiChart extends React.PureComponent { yScale, voronoiDiagram, innerWidth, - innerHeight, + innerHeight }; } @@ -57,10 +61,7 @@ class VoronoiChart extends React.PureComponent { } componentWillReceiveProps(nextProps) { - if ( - nextProps.width !== this.props.width || - nextProps.height !== this.props.height - ) { + if (nextProps.width !== this.props.width || nextProps.height !== this.props.height) { this.setState(VoronoiChart.getUpdatedState(nextProps)); } } @@ -72,13 +73,13 @@ class VoronoiChart extends React.PureComponent { if (closest) { const neighbors = {}; const cell = voronoiDiagram.cells[closest.index]; - cell.halfedges.forEach((index) => { + cell.halfedges.forEach(index => { debugger; const edge = voronoiDiagram.edges[index]; const { left, right } = edge; if (left && left !== closest) neighbors[left.data.id] = true; else if (right && right !== closest) neighbors[right.data.id] = true; - }) + }); this.setState({ selected: closest, neighbors }); } } @@ -93,7 +94,7 @@ class VoronoiChart extends React.PureComponent { xScale, yScale, selected, - neighbors, + neighbors } = this.state; const polygons = voronoiDiagram.polygons(); @@ -102,39 +103,37 @@ class VoronoiChart extends React.PureComponent { { this.svg = ref; }} + ref={ref => { + this.svg = ref; + }} > - + { this.setState({ selected: null, neighbors: null }); }} + onMouseLeave={() => { + this.setState({ selected: null, neighbors: null }); + }} > - {polygons.map((polygon) => ( + {polygons.map(polygon => ( ( - selected && (d.id === selected.data.id || neighbors[d.id]) ? - 'url(#voronoi_orange_red)' : 'url(#voronoi_pink_red)' - )} - fillOpacity={(d) => ( - neighbors && neighbors[d.id] ? 0.4 : 1 - )} + fill={d => + selected && (d.id === selected.data.id || neighbors[d.id]) + ? 'url(#voronoi_orange_red)' + : 'url(#voronoi_pink_red)' + } + fillOpacity={d => (neighbors && neighbors[d.id] ? 0.4 : 1)} stroke="#fff" strokeWidth={1} /> ))} - {data.map((d) => ( + {data.map(d => ( ( - -)); +export default ({ width, height, margin, events }) => ( + +); diff --git a/packages/vx-demo/components/charts/flame/util/parseFoldedStack.js b/packages/vx-demo/components/charts/flame/util/parseFoldedStack.js index 20b4fd985..5768f70bf 100644 --- a/packages/vx-demo/components/charts/flame/util/parseFoldedStack.js +++ b/packages/vx-demo/components/charts/flame/util/parseFoldedStack.js @@ -2,4 +2,4 @@ export default ({ source }) => { return source.split('\n').reduce((lines, line) => { return lines.concat(line.split(' ')); }, []); -} +}; diff --git a/packages/vx-demo/components/codeblocks/BrushChartCode.js b/packages/vx-demo/components/codeblocks/BrushChartCode.js index cc2624ec1..115d54540 100644 --- a/packages/vx-demo/components/codeblocks/BrushChartCode.js +++ b/packages/vx-demo/components/codeblocks/BrushChartCode.js @@ -166,4 +166,4 @@ export default withBrush(BrushChart); `} ); -} +}; diff --git a/packages/vx-demo/components/codeblocks/Codeblock.js b/packages/vx-demo/components/codeblocks/Codeblock.js index 88eb3e7c5..b4b5923c5 100644 --- a/packages/vx-demo/components/codeblocks/Codeblock.js +++ b/packages/vx-demo/components/codeblocks/Codeblock.js @@ -1,5 +1,5 @@ import React from 'react'; -import ReactDOMServer from 'react-dom/server' +import ReactDOMServer from 'react-dom/server'; import Prism from 'prismjs'; import 'prismjs/components/prism-jsx.min'; @@ -7,12 +7,12 @@ const Lines = ({ lines }) => { const size = lines.length; return (