new(brush): expose updateBrush method

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<BaseBrush>;
 };
 
 class Brush extends Component<BrushProps> {
@@ -160,6 +162,7 @@ class Brush extends Component<BrushProps> {
       margin,
       brushDirection,
       initialBrushPosition,
+      innerRef,
       resizeTriggerAreas,
       brushRegion,
       yAxisOrientation,
@@ -216,20 +219,21 @@ class Brush extends Component<BrushProps> {
         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}
       />
     );
   }

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<BaseBrush | null>(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 (
     <div>
       <svg width={width} height={height}>
@@ -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({
           />
         </AreaChart>
       </svg>
+      <button onClick={handleResetClick}>Reset</button>&nbsp;
+      <button onClick={handleLastWeekClick}>1 Week</button>
     </div>
   );
 }