From ac972c948351c560de035439461a8d22631f9801 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Mon, 27 May 2024 21:04:06 -0400 Subject: [PATCH 1/3] feat(visx-marker): add Circle2, same as Circle but default refX to mid point instead of zero --- packages/visx-marker/src/index.ts | 1 + packages/visx-marker/src/markers/Circle2.tsx | 28 +++++++++++++++ packages/visx-marker/test/Circle2.test.tsx | 36 ++++++++++++++++++++ 3 files changed, 65 insertions(+) create mode 100644 packages/visx-marker/src/markers/Circle2.tsx create mode 100644 packages/visx-marker/test/Circle2.test.tsx 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..7478919d6 --- /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')).toBe(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); + }); +}); From 8cce3b69496c396bc5a1becc49c4732de37a1b5d Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Mon, 27 May 2024 21:36:43 -0400 Subject: [PATCH 2/3] feat(visx-demo): update curves sandbox to use MarkerCircle2 --- packages/visx-demo/src/sandboxes/visx-curve/Example.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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" /> - + From 8ca31d9d3e9312a7214129da54b82cb0387f353a Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Mon, 27 May 2024 21:51:38 -0400 Subject: [PATCH 3/3] internal(marker): update Circle2.test, toBe => toEqual --- packages/visx-marker/test/Circle2.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/visx-marker/test/Circle2.test.tsx b/packages/visx-marker/test/Circle2.test.tsx index 7478919d6..6b9be44d2 100644 --- a/packages/visx-marker/test/Circle2.test.tsx +++ b/packages/visx-marker/test/Circle2.test.tsx @@ -27,7 +27,7 @@ describe('', () => { const mid = bounds / 2; expect(marker.prop('markerWidth')).toEqual(bounds); expect(marker.prop('markerHeight')).toEqual(bounds); - expect(marker.prop('refX')).toBe(mid); + expect(marker.prop('refX')).toEqual(mid); expect(marker.prop('refY')).toEqual(mid); expect(circle.prop('r')).toEqual(size); expect(circle.prop('cx')).toEqual(mid);