diff --git a/packages/visx-brush/src/Brush.tsx b/packages/visx-brush/src/Brush.tsx index 848891676..a1bcf0a03 100644 --- a/packages/visx-brush/src/Brush.tsx +++ b/packages/visx-brush/src/Brush.tsx @@ -56,6 +56,8 @@ export type BrushProps = { resetOnEnd?: boolean; /** Size of Brush handles, applies to all `resizeTriggerAreas`. */ handleSize: number; + /** Reference to the BaseBrush component. */ + innerRef?: React.MutableRefObject; }; class Brush extends Component { @@ -160,6 +162,7 @@ class Brush extends Component { margin, brushDirection, initialBrushPosition, + innerRef, resizeTriggerAreas, brushRegion, yAxisOrientation, @@ -216,20 +219,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..59aed25da 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, { BaseBrushState, UpdateBrush } 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,35 @@ function BrushChart({ [brushDateScale], ); + // event handlers + const handleClearClick = () => { + if (brushRef?.current) { + setFilteredStock(stock); + brushRef.current.reset(); + } + }; + + const handleResetClick = () => { + if (brushRef?.current) { + const updater: UpdateBrush = prevBrush => { + const newExtent = brushRef.current!.getExtent( + initialBrushPosition.start, + initialBrushPosition.end, + ); + + const newState: BaseBrushState = { + ...prevBrush, + start: { y: newExtent.y0, x: newExtent.x0 }, + end: { y: newExtent.y1, x: newExtent.x1 }, + extent: newExtent, + }; + + return newState; + }; + brushRef.current.updateBrush(updater); + } + }; + return (
@@ -155,6 +186,7 @@ function BrushChart({ height={yBrushMax} margin={brushMargin} handleSize={8} + innerRef={brushRef} resizeTriggerAreas={['left', 'right']} brushDirection="horizontal" initialBrushPosition={initialBrushPosition} @@ -164,6 +196,8 @@ function BrushChart({ /> +   +
); }