diff --git a/packages/visx-demo/src/sandboxes/visx-curve/Example.tsx b/packages/visx-demo/src/sandboxes/visx-curve/Example.tsx index 9a01ed0ed..59cf88193 100644 --- a/packages/visx-demo/src/sandboxes/visx-curve/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-curve/Example.tsx @@ -4,7 +4,7 @@ import * as allCurves from '@visx/curve'; import { Group } from '@visx/group'; import { LinePath } from '@visx/shape'; import { scaleTime, scaleLinear } from '@visx/scale'; -import { MarkerArrow, MarkerCross, MarkerX, MarkerCircle, MarkerLine } from '@visx/marker'; +import { MarkerArrow, MarkerCross, MarkerX, MarkerCircle2, MarkerLine } from '@visx/marker'; import generateDateValue, { DateValue } from '@visx/mock-data/lib/generators/genDateValue'; type CurveType = keyof typeof allCurves; @@ -89,7 +89,7 @@ export default function Example({ width, height, showControls = true }: CurvePro strokeOpacity={0.6} markerUnits="userSpaceOnUse" /> - + diff --git a/packages/visx-marker/src/index.ts b/packages/visx-marker/src/index.ts index 852be0ce8..37b7ada43 100644 --- a/packages/visx-marker/src/index.ts +++ b/packages/visx-marker/src/index.ts @@ -3,4 +3,5 @@ export { default as MarkerArrow } from './markers/Arrow'; export { default as MarkerCross } from './markers/Cross'; export { default as MarkerX } from './markers/X'; export { default as MarkerCircle } from './markers/Circle'; +export { default as MarkerCircle2 } from './markers/Circle2'; export { default as MarkerLine } from './markers/Line'; diff --git a/packages/visx-marker/src/markers/Circle2.tsx b/packages/visx-marker/src/markers/Circle2.tsx new file mode 100644 index 000000000..6cdcaf4f9 --- /dev/null +++ b/packages/visx-marker/src/markers/Circle2.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import Marker, { MarkerComponentProps } from './Marker'; + +export default function MarkerCircle2({ + id, + size = 9, + strokeWidth = 1, + ...restProps +}: MarkerComponentProps) { + const diameter = size * 2; + const bounds = diameter + strokeWidth; + const mid = bounds / 2; + return ( + + + + ); +} diff --git a/packages/visx-marker/test/Circle2.test.tsx b/packages/visx-marker/test/Circle2.test.tsx new file mode 100644 index 000000000..6b9be44d2 --- /dev/null +++ b/packages/visx-marker/test/Circle2.test.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { MarkerCircle2, Marker } from '../src'; + +const Wrapper = (restProps = {}) => + shallow(); + +describe('', () => { + test('it should be defined', () => { + expect(MarkerCircle2).toBeDefined(); + }); + + test('it should render a containing a ', () => { + const marker = Wrapper().find(Marker); + const circle = marker.dive().find('circle'); + expect(marker).toHaveLength(1); + expect(circle).toHaveLength(1); + }); + + test('it should size correctly', () => { + const size = 8; + const strokeWidth = 1; + const marker = Wrapper({ size, strokeWidth }).find(Marker); + const circle = marker.dive().find('circle'); + const diameter = size * 2; + const bounds = diameter + strokeWidth; + const mid = bounds / 2; + expect(marker.prop('markerWidth')).toEqual(bounds); + expect(marker.prop('markerHeight')).toEqual(bounds); + expect(marker.prop('refX')).toEqual(mid); + expect(marker.prop('refY')).toEqual(mid); + expect(circle.prop('r')).toEqual(size); + expect(circle.prop('cx')).toEqual(mid); + expect(circle.prop('cy')).toEqual(mid); + }); +});