From 5531d3a0f3611480272a1173abdf40f6b2e97de0 Mon Sep 17 00:00:00 2001 From: peterwiebe Date: Tue, 17 Nov 2020 17:11:41 -0800 Subject: [PATCH 1/7] Expose updateBrush method in ref API --- packages/visx-brush/src/Brush.tsx | 19 ++++++---- .../src/sandboxes/visx-brush/Example.tsx | 38 ++++++++++++++++++- 2 files changed, 48 insertions(+), 9 deletions(-) diff --git a/packages/visx-brush/src/Brush.tsx b/packages/visx-brush/src/Brush.tsx index 848891676..9188d0fac 100644 --- a/packages/visx-brush/src/Brush.tsx +++ b/packages/visx-brush/src/Brush.tsx @@ -56,6 +56,7 @@ export type BrushProps = { resetOnEnd?: boolean; /** Size of Brush handles, applies to all `resizeTriggerAreas`. */ handleSize: number; + innerRef?: React.Object; }; class Brush extends Component { @@ -160,6 +161,7 @@ class Brush extends Component { margin, brushDirection, initialBrushPosition, + innerRef, resizeTriggerAreas, brushRegion, yAxisOrientation, @@ -216,20 +218,21 @@ class Brush extends Component { height={brushRegionHeight} left={left} top={top} + brushDirection={brushDirection} + disableDraggingSelection={disableDraggingSelection} + handleSize={handleSize} inheritedMargin={margin} initialBrushPosition={initialBrushPosition} - onChange={this.handleChange} - onBrushEnd={this.handleBrushEnd} - onBrushStart={this.handleBrushStart} - handleSize={handleSize} + ref={innerRef} + resetOnEnd={resetOnEnd} resizeTriggerAreas={resizeTriggerAreas} - brushDirection={brushDirection} selectedBoxStyle={selectedBoxStyle} - disableDraggingSelection={disableDraggingSelection} - resetOnEnd={resetOnEnd} + onBrushEnd={this.handleBrushEnd} + onBrushStart={this.handleBrushStart} + onChange={this.handleChange} + onClick={onClick} onMouseLeave={onMouseLeave} onMouseMove={onMouseMove} - onClick={onClick} /> ); } diff --git a/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx b/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx index ce1965fc8..ee675f8c2 100644 --- a/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx @@ -1,8 +1,9 @@ -import React, { useState, useMemo } from 'react'; +import React, {useRef, useState, useMemo } from 'react'; import { scaleTime, scaleLinear } from '@visx/scale'; import appleStock, { AppleStock } from '@visx/mock-data/lib/mocks/appleStock'; import { Brush } from '@visx/brush'; import { Bounds } from '@visx/brush/lib/types'; +import BaseBrush from '@visx/brush/lib/BaseBrush' import { PatternLines } from '@visx/pattern'; import { LinearGradient } from '@visx/gradient'; import { max, extent } from 'd3-array'; @@ -45,6 +46,7 @@ function BrushChart({ right: 20, }, }: BrushProps) { + const brushRef = useRef(null) const [filteredStock, setFilteredStock] = useState(stock); const onBrushChange = (domain: Bounds | null) => { @@ -113,6 +115,37 @@ function BrushChart({ [brushDateScale], ); + const handleResetClick = () => { + if (!brushRef?.current) { + console.log(`innerRef Prop not properly set.`) + } + + setFilteredStock(stock) + brushRef?.current?.reset() + } + + const handleLastWeekClick = () => { + if (!brushRef?.current) { + console.log(`innerRef Prop not properly set.`) + } + + // Update Brush + brushRef?.current?.updateBrush((prevBrush) => { + const start = {x: brushDateScale(getDate(stock[stock.length -8]))} + const end = {x: brushDateScale(getDate(stock[stock.length -1]))} + const extent = brushRef?.current?.getExtent(start, end) + + const newState = { + ...prevBrush, + start: { y: extent.y0, x: extent.x0 }, + end: { y: extent.y1, x: extent.x1 }, + extent, + } + + return newState + }) + } + return (
@@ -155,6 +188,7 @@ function BrushChart({ height={yBrushMax} margin={brushMargin} handleSize={8} + innerRef={brushRef} resizeTriggerAreas={['left', 'right']} brushDirection="horizontal" initialBrushPosition={initialBrushPosition} @@ -164,6 +198,8 @@ function BrushChart({ /> +   +
); } From 723a840a4c94e1b79c40332f8e0c01c2eb2ff701 Mon Sep 17 00:00:00 2001 From: peterwiebe Date: Tue, 17 Nov 2020 17:13:28 -0800 Subject: [PATCH 2/7] Fix formatting --- .../src/sandboxes/visx-brush/Example.tsx | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx b/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx index ee675f8c2..1d8fa6a1d 100644 --- a/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx @@ -1,9 +1,9 @@ -import React, {useRef, useState, useMemo } from 'react'; +import React, { useRef, useState, useMemo } from 'react'; import { scaleTime, scaleLinear } from '@visx/scale'; import appleStock, { AppleStock } from '@visx/mock-data/lib/mocks/appleStock'; import { Brush } from '@visx/brush'; import { Bounds } from '@visx/brush/lib/types'; -import BaseBrush from '@visx/brush/lib/BaseBrush' +import BaseBrush from '@visx/brush/lib/BaseBrush'; import { PatternLines } from '@visx/pattern'; import { LinearGradient } from '@visx/gradient'; import { max, extent } from 'd3-array'; @@ -46,7 +46,7 @@ function BrushChart({ right: 20, }, }: BrushProps) { - const brushRef = useRef(null) + const brushRef = useRef(null); const [filteredStock, setFilteredStock] = useState(stock); const onBrushChange = (domain: Bounds | null) => { @@ -117,34 +117,34 @@ function BrushChart({ const handleResetClick = () => { if (!brushRef?.current) { - console.log(`innerRef Prop not properly set.`) + console.log(`innerRef Prop not properly set.`); } - setFilteredStock(stock) - brushRef?.current?.reset() - } + setFilteredStock(stock); + brushRef?.current?.reset(); + }; const handleLastWeekClick = () => { if (!brushRef?.current) { - console.log(`innerRef Prop not properly set.`) + console.log(`innerRef Prop not properly set.`); } // Update Brush - brushRef?.current?.updateBrush((prevBrush) => { - const start = {x: brushDateScale(getDate(stock[stock.length -8]))} - const end = {x: brushDateScale(getDate(stock[stock.length -1]))} - const extent = brushRef?.current?.getExtent(start, end) + brushRef?.current?.updateBrush(prevBrush => { + const start = { x: brushDateScale(getDate(stock[stock.length - 8])) }; + const end = { x: brushDateScale(getDate(stock[stock.length - 1])) }; + const extent = brushRef?.current?.getExtent(start, end); const newState = { ...prevBrush, start: { y: extent.y0, x: extent.x0 }, end: { y: extent.y1, x: extent.x1 }, extent, - } + }; - return newState - }) - } + return newState; + }); + }; return (
From 138a962a5ffb488bd76fa229b3271b787309d8e2 Mon Sep 17 00:00:00 2001 From: peterwiebe Date: Wed, 18 Nov 2020 06:59:50 -0800 Subject: [PATCH 3/7] Fix innerRef type --- packages/visx-brush/src/Brush.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/visx-brush/src/Brush.tsx b/packages/visx-brush/src/Brush.tsx index 9188d0fac..31b9908ea 100644 --- a/packages/visx-brush/src/Brush.tsx +++ b/packages/visx-brush/src/Brush.tsx @@ -56,7 +56,8 @@ export type BrushProps = { resetOnEnd?: boolean; /** Size of Brush handles, applies to all `resizeTriggerAreas`. */ handleSize: number; - innerRef?: React.Object; + /** Reference to the BaseBrush component */ + innerRef?: React.MutableRefObject; }; class Brush extends Component { From 513111d7a87ce314f8fa8275037d38f15604bc04 Mon Sep 17 00:00:00 2001 From: peterwiebe Date: Wed, 18 Nov 2020 07:26:04 -0800 Subject: [PATCH 4/7] Satisfy type requirements --- .../src/sandboxes/visx-brush/Example.tsx | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx b/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx index 1d8fa6a1d..15b65996d 100644 --- a/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx @@ -3,7 +3,7 @@ import { scaleTime, scaleLinear } from '@visx/scale'; import appleStock, { AppleStock } from '@visx/mock-data/lib/mocks/appleStock'; import { Brush } from '@visx/brush'; import { Bounds } from '@visx/brush/lib/types'; -import BaseBrush from '@visx/brush/lib/BaseBrush'; +import BaseBrush, { BaseBrushState, UpdateBrush } from '@visx/brush/lib/BaseBrush'; import { PatternLines } from '@visx/pattern'; import { LinearGradient } from '@visx/gradient'; import { max, extent } from 'd3-array'; @@ -125,25 +125,27 @@ function BrushChart({ }; const handleLastWeekClick = () => { - if (!brushRef?.current) { + if (brushRef?.current === null) { console.log(`innerRef Prop not properly set.`); + } else { + // Update Brush + const updater: UpdateBrush = (prevBrush) => { + const start = { x: brushDateScale(getDate(stock[stock.length - 8])) }; + const end = { x: brushDateScale(getDate(stock[stock.length - 1])) }; + const extent = brushRef.current!.getExtent(start, end); + + const newState: BaseBrushState = { + ...prevBrush, + start: { y: extent.y0, x: extent.x0 }, + end: { y: extent.y1, x: extent.x1 }, + extent, + }; + + return newState; + } + brushRef?.current?.updateBrush(updater); } - // Update Brush - brushRef?.current?.updateBrush(prevBrush => { - const start = { x: brushDateScale(getDate(stock[stock.length - 8])) }; - const end = { x: brushDateScale(getDate(stock[stock.length - 1])) }; - const extent = brushRef?.current?.getExtent(start, end); - - const newState = { - ...prevBrush, - start: { y: extent.y0, x: extent.x0 }, - end: { y: extent.y1, x: extent.x1 }, - extent, - }; - - return newState; - }); }; return ( From 21ceb2c37f273ad6264de444e309b492424d90f0 Mon Sep 17 00:00:00 2001 From: peterwiebe Date: Wed, 18 Nov 2020 07:36:18 -0800 Subject: [PATCH 5/7] Add null to innerRef types --- packages/visx-brush/src/Brush.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/visx-brush/src/Brush.tsx b/packages/visx-brush/src/Brush.tsx index 31b9908ea..41ae6652a 100644 --- a/packages/visx-brush/src/Brush.tsx +++ b/packages/visx-brush/src/Brush.tsx @@ -57,7 +57,7 @@ export type BrushProps = { /** Size of Brush handles, applies to all `resizeTriggerAreas`. */ handleSize: number; /** Reference to the BaseBrush component */ - innerRef?: React.MutableRefObject; + innerRef?: React.MutableRefObject; }; class Brush extends Component { From b437d7e6d204b06bcba3a3784202923577c41455 Mon Sep 17 00:00:00 2001 From: peterwiebe Date: Wed, 18 Nov 2020 08:09:15 -0800 Subject: [PATCH 6/7] Fix lint errors --- .../src/sandboxes/visx-brush/Example.tsx | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx b/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx index 15b65996d..ec7728066 100644 --- a/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx @@ -116,36 +116,35 @@ function BrushChart({ ); const handleResetClick = () => { - if (!brushRef?.current) { + if (brushRef?.current) { + setFilteredStock(stock); + brushRef.current.reset(); + } else { console.log(`innerRef Prop not properly set.`); } - - setFilteredStock(stock); - brushRef?.current?.reset(); }; const handleLastWeekClick = () => { if (brushRef?.current === null) { console.log(`innerRef Prop not properly set.`); - } else { + } else if (brushRef?.current) { // Update Brush - const updater: UpdateBrush = (prevBrush) => { + const updater: UpdateBrush = prevBrush => { const start = { x: brushDateScale(getDate(stock[stock.length - 8])) }; const end = { x: brushDateScale(getDate(stock[stock.length - 1])) }; - const extent = brushRef.current!.getExtent(start, end); + const newExtent = brushRef.current!.getExtent(start, end); const newState: BaseBrushState = { ...prevBrush, - start: { y: extent.y0, x: extent.x0 }, - end: { y: extent.y1, x: extent.x1 }, - extent, + start: { y: newExtent.y0, x: newExtent.x0 }, + end: { y: newExtent.y1, x: newExtent.x1 }, + extent: newExtent, }; return newState; - } - brushRef?.current?.updateBrush(updater); + }; + brushRef.current.updateBrush(updater); } - }; return ( From bad54fc53d36e35432bb792d8e5539a3147a0c86 Mon Sep 17 00:00:00 2001 From: peterwiebe Date: Sat, 21 Nov 2020 10:57:03 -0800 Subject: [PATCH 7/7] Change 1 week button to reset and reset to clear --- packages/visx-brush/src/Brush.tsx | 2 +- .../src/sandboxes/visx-brush/Example.tsx | 23 ++++++++----------- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/visx-brush/src/Brush.tsx b/packages/visx-brush/src/Brush.tsx index 41ae6652a..a1bcf0a03 100644 --- a/packages/visx-brush/src/Brush.tsx +++ b/packages/visx-brush/src/Brush.tsx @@ -56,7 +56,7 @@ export type BrushProps = { resetOnEnd?: boolean; /** Size of Brush handles, applies to all `resizeTriggerAreas`. */ handleSize: number; - /** Reference to the BaseBrush component */ + /** Reference to the BaseBrush component. */ innerRef?: React.MutableRefObject; }; diff --git a/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx b/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx index ec7728066..59aed25da 100644 --- a/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx @@ -115,24 +115,21 @@ function BrushChart({ [brushDateScale], ); - const handleResetClick = () => { + // event handlers + const handleClearClick = () => { if (brushRef?.current) { setFilteredStock(stock); brushRef.current.reset(); - } else { - console.log(`innerRef Prop not properly set.`); } }; - const handleLastWeekClick = () => { - if (brushRef?.current === null) { - console.log(`innerRef Prop not properly set.`); - } else if (brushRef?.current) { - // Update Brush + const handleResetClick = () => { + if (brushRef?.current) { const updater: UpdateBrush = prevBrush => { - const start = { x: brushDateScale(getDate(stock[stock.length - 8])) }; - const end = { x: brushDateScale(getDate(stock[stock.length - 1])) }; - const newExtent = brushRef.current!.getExtent(start, end); + const newExtent = brushRef.current!.getExtent( + initialBrushPosition.start, + initialBrushPosition.end, + ); const newState: BaseBrushState = { ...prevBrush, @@ -199,8 +196,8 @@ function BrushChart({ /> -   - +   +
); }