From 1f516ed341fc6671061d2cbf42072be7ce23bee4 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 1 May 2020 17:19:21 -0700 Subject: [PATCH 1/7] types(vx-brush): add PartialBrushStartEnd --- packages/vx-brush/src/types.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/vx-brush/src/types.ts b/packages/vx-brush/src/types.ts index 170e9e348..a67ef8c02 100644 --- a/packages/vx-brush/src/types.ts +++ b/packages/vx-brush/src/types.ts @@ -29,6 +29,11 @@ export interface BrushStartEnd { end: Point; } +export interface PartialBrushStartEnd { + start: Partial; + end: Partial; +} + export type ResizeTriggerAreas = | 'left' | 'right' From b6a85ecf5fbd69079cf30c84ff0017dbbcd2d09a Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 1 May 2020 17:19:50 -0700 Subject: [PATCH 2/7] fix(vx-demo/Gallery): Add function name to fix jest coverage --- packages/vx-demo/src/components/Gallery.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx index c3887fc14..903833ab4 100644 --- a/packages/vx-demo/src/components/Gallery.tsx +++ b/packages/vx-demo/src/components/Gallery.tsx @@ -67,7 +67,7 @@ const items = [ const tiltOptions = { max: 8, scale: 1 }; const detailsHeight = 76; -export default function() { +export default function Gallery() { return (
From bf5140bcf624403e50ccb737238b791a3daf47c8 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 1 May 2020 17:20:52 -0700 Subject: [PATCH 3/7] fix(Brush): fix initialBrushPosition logic --- packages/vx-brush/src/BaseBrush.tsx | 105 +++++++++++++--------------- 1 file changed, 47 insertions(+), 58 deletions(-) diff --git a/packages/vx-brush/src/BaseBrush.tsx b/packages/vx-brush/src/BaseBrush.tsx index 826cf0dc4..d5b30023e 100644 --- a/packages/vx-brush/src/BaseBrush.tsx +++ b/packages/vx-brush/src/BaseBrush.tsx @@ -6,7 +6,7 @@ import Drag, { HandlerArgs as DragArgs } from '@vx/drag/lib/Drag'; import BrushHandle from './BrushHandle'; import BrushCorner from './BrushCorner'; import BrushSelection from './BrushSelection'; -import { MarginShape, Point, BrushShape, BrushStartEnd, ResizeTriggerAreas } from './types'; +import { MarginShape, Point, BrushShape, ResizeTriggerAreas, PartialBrushStartEnd } from './types'; const BRUSH_OVERLAY_STYLES = { cursor: 'crosshair' }; @@ -16,7 +16,7 @@ type MouseHandlerEvent = export type BaseBrushProps = { brushDirection?: 'horizontal' | 'vertical' | 'both'; - initialBrushPosition?: BrushStartEnd; + initialBrushPosition?: PartialBrushStartEnd; width: number; height: number; left: number; @@ -49,18 +49,19 @@ export type UpdateBrush = export default class BaseBrush extends React.Component { private constructor(props: BaseBrushProps) { super(props); + const { initialBrushPosition } = props; + const extent = initialBrushPosition + ? this.getExtent(initialBrushPosition.start, initialBrushPosition.end) + : { + x0: -1, + x1: -1, + y0: -1, + y1: -1, + }; this.state = { - start: { x: 0, y: 0 }, - end: { x: 0, y: 0 }, - ...this.props.initialBrushPosition, - extent: this.props.initialBrushPosition - ? this.getExtent(this.props.initialBrushPosition.start, this.props.initialBrushPosition.end) - : { - x0: -1, - x1: -1, - y0: -1, - y1: -1, - }, + start: { x: Math.max(0, extent.x0), y: Math.max(0, extent.y0) }, + end: { x: Math.max(0, extent.x1), y: Math.max(0, extent.y1) }, + extent, bounds: { x0: 0, x1: this.props.width, @@ -98,14 +99,6 @@ export default class BaseBrush extends React.Component { + getExtent = (start: Partial, end: Partial) => { const { brushDirection, width, height } = this.props; - const x0 = brushDirection === 'vertical' ? 0 : Math.min(start.x, end.x); - const x1 = brushDirection === 'vertical' ? width : Math.max(start.x, end.x); - const y0 = brushDirection === 'horizontal' ? 0 : Math.min(start.y, end.y); - const y1 = brushDirection === 'horizontal' ? height : Math.max(start.y, end.y); + const x0 = brushDirection === 'vertical' ? 0 : Math.min(start.x || 0, end.x || 0); + const x1 = brushDirection === 'vertical' ? width : Math.max(start.x || 0, end.x || 0); + const y0 = brushDirection === 'horizontal' ? 0 : Math.min(start.y || 0, end.y || 0); + const y1 = brushDirection === 'horizontal' ? height : Math.max(start.y || 0, end.y || 0); return { x0, @@ -163,19 +156,18 @@ export default class BaseBrush extends React.Component { + handleDragMove = (drag: DragArgs) => { const { left, top, inheritedMargin } = this.props; - if (!draw.isDragging) return; + if (!drag.isDragging) return; const marginLeft = (inheritedMargin && inheritedMargin.left) || 0; const marginTop = (inheritedMargin && inheritedMargin.top) || 0; const end = { - x: (draw.x || 0) + draw.dx - left - marginLeft, - y: (draw.y || 0) + draw.dy - top - marginTop, + x: (drag.x || 0) + drag.dx - left - marginLeft, + y: (drag.y || 0) + drag.dy - top - marginTop, }; this.updateBrush((prevBrush: BaseBrushState) => { const { start } = prevBrush; const extent = this.getExtent(start, end); - return { ...prevBrush, end, @@ -185,36 +177,33 @@ export default class BaseBrush extends React.Component { - const { isBrushing } = this.state; - if (isBrushing) { - const { onBrushEnd, resetOnEnd } = this.props; - this.updateBrush((prevBrush: BaseBrushState) => { - const { extent } = prevBrush; - const newState = { - ...prevBrush, - start: { - x: extent.x0, - y: extent.y0, - }, - end: { - x: extent.x1, - y: extent.y1, - }, - isBrushing: false, - activeHandle: null, - }; + const { onBrushEnd, resetOnEnd } = this.props; + this.updateBrush((prevBrush: BaseBrushState) => { + const { extent } = prevBrush; + const newState = { + ...prevBrush, + start: { + x: extent.x0, + y: extent.y0, + }, + end: { + x: extent.x1, + y: extent.y1, + }, + isBrushing: false, + activeHandle: null, + }; - if (onBrushEnd) { - onBrushEnd(newState); - } + if (onBrushEnd) { + onBrushEnd(newState); + } - if (resetOnEnd) { - this.reset(); - } + if (resetOnEnd) { + this.reset(); + } - return newState; - }); - } + return newState; + }); }; getBrushWidth = () => { From f494a12a9214d1ba3ac03f29e7aaf7a101e147a3 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 1 May 2020 17:21:29 -0700 Subject: [PATCH 4/7] demo(vx-brush): add initialBrushPosition to demo --- packages/vx-demo/src/components/tiles/Brush.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/vx-demo/src/components/tiles/Brush.tsx b/packages/vx-demo/src/components/tiles/Brush.tsx index 670d037a8..967691824 100644 --- a/packages/vx-demo/src/components/tiles/Brush.tsx +++ b/packages/vx-demo/src/components/tiles/Brush.tsx @@ -16,7 +16,7 @@ import { ShowProvidedProps, MarginShape } from '../../types'; /** * Initialize some variables */ -const stock = appleStock.slice(1200); +const stock = appleStock.slice(1000); const axisColor = '#fff'; const axisBottomTickLabelProps = { textAnchor: 'middle' as const, @@ -155,6 +155,11 @@ function BrushChart({ nice: true, }); + const initialBrushPosition = { + start: { x: brushDateScale(getDate(stock[50])) }, + end: { x: brushDateScale(getDate(stock[150])) }, + }; + return (
@@ -203,6 +208,7 @@ function BrushChart({ handleSize={8} resizeTriggerAreas={['left', 'right', 'bottomRight']} brushDirection="horizontal" + initialBrushPosition={initialBrushPosition} onChange={onBrushChange} onClick={() => setFilteredStock(stock)} selectedBoxStyle={{ From 451f9ac19ab51fdc7d758560a04d715ff9e3fc14 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 1 May 2020 17:22:32 -0700 Subject: [PATCH 5/7] demo(vx-brush): update initial brush position --- packages/vx-demo/src/components/tiles/Brush.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vx-demo/src/components/tiles/Brush.tsx b/packages/vx-demo/src/components/tiles/Brush.tsx index 967691824..282e15293 100644 --- a/packages/vx-demo/src/components/tiles/Brush.tsx +++ b/packages/vx-demo/src/components/tiles/Brush.tsx @@ -157,7 +157,7 @@ function BrushChart({ const initialBrushPosition = { start: { x: brushDateScale(getDate(stock[50])) }, - end: { x: brushDateScale(getDate(stock[150])) }, + end: { x: brushDateScale(getDate(stock[100])) }, }; return ( From 7f8a2b818741a4f7796f7e43f6604c9161c4f615 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 1 May 2020 17:42:03 -0700 Subject: [PATCH 6/7] fix(vx-brush): reference PartialBrushStartEnd in Brush --- packages/vx-brush/src/Brush.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/vx-brush/src/Brush.tsx b/packages/vx-brush/src/Brush.tsx index e54210bfd..724389e26 100644 --- a/packages/vx-brush/src/Brush.tsx +++ b/packages/vx-brush/src/Brush.tsx @@ -1,6 +1,13 @@ import React from 'react'; import BaseBrush, { BaseBrushProps, BaseBrushState } from './BaseBrush'; -import { Bounds, BrushStartEnd, MarginShape, Point, ResizeTriggerAreas, Scale } from './types'; +import { + Bounds, + PartialBrushStartEnd, + MarginShape, + Point, + ResizeTriggerAreas, + Scale, +} from './types'; import { scaleInvert, getDomainFromExtent } from './utils'; const SAFE_PIXEL = 2; @@ -20,7 +27,7 @@ export type BrushProps = { onClick: BaseBrushProps['onClick']; margin: MarginShape; brushDirection: 'vertical' | 'horizontal' | 'both'; - initialBrushPosition?: BrushStartEnd; + initialBrushPosition?: PartialBrushStartEnd; resizeTriggerAreas: ResizeTriggerAreas[]; brushRegion: 'xAxis' | 'yAxis' | 'chart'; yAxisOrientation: 'left' | 'right'; From 133fcaae601d223b0555edb2a2e8151daf3ce9a0 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 1 May 2020 19:40:04 -0700 Subject: [PATCH 7/7] test(Tooltip): lint test --- packages/vx-tooltip/test/Tooltip.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vx-tooltip/test/Tooltip.test.tsx b/packages/vx-tooltip/test/Tooltip.test.tsx index 270330f0a..baf9ae8d9 100644 --- a/packages/vx-tooltip/test/Tooltip.test.tsx +++ b/packages/vx-tooltip/test/Tooltip.test.tsx @@ -19,7 +19,7 @@ describe('', () => { const wrapper = shallow(Hello); const styles = wrapper.props().style; Object.keys(defaultStyles).forEach(key => { - expect(styles[key]).toBe(undefined); + expect(styles[key]).toBeUndefined(); }); }); @@ -34,7 +34,7 @@ describe('', () => { boxShadow: '0 2px 3px rgba(133,133,133,0.5)', lineHeight: '2em', }; - const wrapper = shallow(); + const wrapper = shallow(); const styles = wrapper.props().style; Object.entries(newStyles).forEach(([key, value]) => { expect(styles[key]).toBe(value);