Merge pull request #438 from FormidableLabs/brush-bugs

x y zoom

demo/components/victory-brush-container-demo.js

@@ -99,7 +99,7 @@ class App extends React.Component {
 
           <VictoryChart style={chartStyle}
             containerComponent={
-              <VictoryBrushContainer/>
+              <VictoryBrushContainer dimension={null}/>
             }
           >
             <VictoryLine
@@ -153,7 +153,7 @@ class App extends React.Component {
             domain={{x: [0, 10], y: [-5, 5]}}
             containerComponent={
               <VictoryBrushContainer
-                selectedDomain={{x: [0, 10], y: [-5, 5]}}
+                selectedDomain={{x: [0, 10]}}
               />
             }
             size={(datum, active) => active ? 5 : 3}
@@ -293,6 +293,27 @@ class App extends React.Component {
               ]}
             />
           </VictoryStack>
+
+          <VictoryLine style={chartStyle}
+            containerComponent={
+              <VictoryBrushContainer
+                selectedDomain={{y: [-3, 3]}}
+                selectionComponent={<rect style={{fill: "teal"}}/>}
+              />
+            }
+            style={{
+              data: {stroke: "teal"}
+            }}
+            data={[
+              {x: 1, y: -3},
+              {x: 2, y: 5},
+              {x: 3, y: -3},
+              {x: 4, y: 0},
+              {x: 5, y: -5},
+              {x: 6, y: 2},
+              {x: 7, y: 0}
+            ]}
+          />
         </div>
       </div>
     );

demo/components/victory-zoom-container-demo.js

@@ -99,7 +99,6 @@ export default class App extends React.Component {
             containerComponent={
               <VictoryZoomContainer
                 zoomDomain={{x: [new Date(1993, 1, 1), new Date(2005, 1, 1)]}}
-                allowZoom={false}
               />
             }
             scale={{
@@ -111,10 +110,8 @@ export default class App extends React.Component {
             />
             <VictoryLine
               style={{
-                data: {stroke: "red", strokeWidth: 5},
-                labels: {fontSize: 12}
+                data: {stroke: "red", strokeWidth: 5}
               }}
-              label={this.state.label}
               data={[
                 {x: new Date(1982, 1, 1), y: 125},
                 {x: new Date(1987, 1, 1), y: 257},
@@ -130,7 +127,9 @@ export default class App extends React.Component {
 
           <VictoryChart style={{parent: parentStyle}}
             animate={{duration: 1500}}
-            containerComponent={<VictoryZoomContainer/>}
+            containerComponent={
+              <VictoryZoomContainer zoomDomain={{x: [0, 50]}} minimumZoom={{x: 5}}/>
+            }
           >
             <VictoryLine
               style={{parent: parentStyle, data: this.state.style}}
@@ -196,7 +195,6 @@ export default class App extends React.Component {
                   }
                 }
               }]}
-              label={this.state.label}
               data={range(0, 100)}
               y={(d) => d * d}
             />

package.json

@@ -31,7 +31,7 @@
     "builder-victory-component": "^3.1.0",
     "d3-voronoi": "^1.0.0",
     "lodash": "^4.12.0",
-    "victory-core": "^14.0.0"
+    "victory-core": "^14.0.1"
   },
   "devDependencies": {
     "builder-victory-component-dev": "^3.1.0",

src/components/containers/brush-helpers.js

@@ -1,5 +1,5 @@
-import { Selection } from "victory-core";
-import { assign, throttle, isFunction, isEqual } from "lodash";
+import { Selection} from "victory-core";
+import { assign, throttle, isFunction, isEqual, defaults } from "lodash";
 
 
 const Helpers = {
@@ -14,9 +14,9 @@ const Helpers = {
   },
 
   getDomainBox(props, fullDomain, selectedDomain) {
-    const { dimension, scale, domain } = props;
-    fullDomain = fullDomain || domain || this.getOriginalDomain(props);
-    selectedDomain = selectedDomain || fullDomain;
+    const { dimension, scale } = props;
+    fullDomain = defaults({}, fullDomain, props.domain);
+    selectedDomain = defaults({}, selectedDomain, fullDomain);
     const fullCoordinates = Selection.getDomainCoordinates(scale, fullDomain);
     const selectedCoordinates = Selection.getDomainCoordinates(scale, selectedDomain);
 
@@ -81,7 +81,9 @@ const Helpers = {
   },
 
   panBox(props, point) {
-    const {fullDomain, selectedDomain, dimension, startX, startY} = props;
+    const {dimension, domain, startX, startY} = props;
+    const selectedDomain = defaults({}, props.selectedDomain, domain);
+    const fullDomain = defaults({}, props.fullDomain, domain);
     const {x1, x2, y1, y2} = props.x1 ?
       props : this.getDomainBox(props, fullDomain, selectedDomain);
 
@@ -111,8 +113,9 @@ const Helpers = {
   onMouseDown(evt, targetProps) { // eslint-disable-line max-statements
     evt.preventDefault();
     const {
-      dimension, selectedDomain, domain, handleWidth, onDomainChange, cachedSelectedDomain
+      dimension, handleWidth, onDomainChange, cachedSelectedDomain, domain
     } = targetProps;
+    const selectedDomain = defaults({}, targetProps.selectedDomain, domain);
     const fullDomainBox = targetProps.fullDomainBox ||
       this.getDomainBox(targetProps, domain);
     const currentDomain = isEqual(selectedDomain, cachedSelectedDomain) ?
@@ -224,7 +227,7 @@ const Helpers = {
   },
 
   onMouseUp(evt, targetProps) {
-    const {x1, y1, x2, y2, domain, onDomainChange} = targetProps;
+    const {x1, y1, x2, y2, onDomainChange, domain} = targetProps;
     // if the mouse hasn't moved since a mouseDown event, select the whole domain region
     if (x1 === x2 || y1 === y2) {
       if (isFunction(onDomainChange)) {

src/components/containers/victory-brush-container.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { VictoryContainer, Selection } from "victory-core";
 import BrushHelpers from "./brush-helpers";
-import { assign, isEqual } from "lodash";
+import { assign, defaults, isEqual } from "lodash";
 
 
 export default class VictoryBrushContainer extends VictoryContainer {
@@ -31,7 +31,6 @@ export default class VictoryBrushContainer extends VictoryContainer {
       stroke: "transparent",
       fill: "transparent"
     },
-    dimension: "x",
     handleWidth: 8,
     selectionComponent: <rect/>,
     handleComponent: <rect/>
@@ -62,14 +61,15 @@ export default class VictoryBrushContainer extends VictoryContainer {
   getSelectBox(props, coordinates) {
     const {x, y} = coordinates;
     const {selectionStyle, selectionComponent} = props;
+    const selectionComponentStyle = selectionComponent.props && selectionComponent.props.style;
     return x[0] !== x[1] && y[0] !== y[1] ?
       React.cloneElement(selectionComponent, {
         width: Math.abs(x[1] - x[0]) || 1,
         height: Math.abs(y[1] - y[0]) || 1,
         x: Math.min(x[0], x[1]),
         y: Math.min(y[0], y[1]),
         cursor: "move",
-        style: selectionStyle
+        style: defaults({}, selectionComponentStyle, selectionStyle)
       }) : null;
   }
 
@@ -78,8 +78,10 @@ export default class VictoryBrushContainer extends VictoryContainer {
     const {x, y} = coordinates;
     const width = Math.abs(x[1] - x[0]) || 1;
     const height = Math.abs(y[1] - y[0]) || 1;
-    const yProps = { style: handleStyle, width, height: handleWidth, cursor: "ns-resize"};
-    const xProps = { style: handleStyle, width: handleWidth, height, cursor: "ew-resize"};
+    const handleComponentStyle = handleComponent.props && handleComponent.props.style || {};
+    const style = defaults({}, handleComponentStyle, handleStyle);
+    const yProps = { style, width, height: handleWidth, cursor: "ns-resize"};
+    const xProps = { style, width: handleWidth, height, cursor: "ew-resize"};
     const handleProps = {
       top: dimension !== "x" && assign({x: x[0], y: y[1] - (handleWidth / 2)}, yProps),
       bottom: dimension !== "x" && assign({x: x[0], y: y[0] - (handleWidth / 2)}, yProps),
@@ -98,9 +100,10 @@ export default class VictoryBrushContainer extends VictoryContainer {
   }
 
   getRect(props) {
-    const {selectedDomain, currentDomain, cachedSelectedDomain, scale} = props;
+    const {currentDomain, cachedSelectedDomain, scale} = props;
+    const selectedDomain = defaults({}, props.selectedDomain, props.domain);
     const domain = isEqual(selectedDomain, cachedSelectedDomain) ?
-      currentDomain || selectedDomain || props.domain : selectedDomain || props.domain;
+      defaults({}, currentDomain, selectedDomain) : selectedDomain;
     const coordinates = Selection.getDomainCoordinates(scale, domain);
     const selectBox = this.getSelectBox(props, coordinates);
     return selectBox ?

src/components/containers/victory-voronoi-container.js

@@ -141,7 +141,7 @@ export default class VictoryVoronoiContainer extends VictoryContainer {
         active: true,
         renderInPortal: false,
         style,
-        flyoutStyle: this.getStyle(props, points, "flyout"),
+        flyoutStyle: this.getStyle(props, points, "flyout")[0],
         text,
         datum: omit(points[0], ["childName", "style", "continuous"]),
         scale,

src/components/containers/victory-zoom-container.js

@@ -11,9 +11,14 @@ export default class VictoryZoomContainer extends VictoryContainer {
       x: CustomPropTypes.domain,
       y: CustomPropTypes.domain
     }),
+    minimumZoom: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number
+    }),
     onDomainChange: PropTypes.func,
     clipContainerComponent: PropTypes.element.isRequired,
-    allowZoom: PropTypes.bool
+    allowZoom: PropTypes.bool,
+    dimension: PropTypes.oneOf(["x", "y"])
   };
   static defaultProps = {
     ...VictoryContainer.defaultProps,
@@ -55,9 +60,11 @@ export default class VictoryZoomContainer extends VictoryContainer {
   }];
 
   clipDataComponents(children, props) { //eslint-disable-line max-statements
-    const { scale, height, clipContainerComponent } = props;
+    const { scale, clipContainerComponent } = props;
     const rangeX = scale.x.range();
+    const rangeY = scale.y.range();
     const plottableWidth = Math.abs(rangeX[0] - rangeX[1]);
+    const plottableHeight = Math.abs(rangeY[0] - rangeY[1]);
     const childComponents = [];
     let group = [];
     let groupNumber = 0;
@@ -66,8 +73,9 @@ export default class VictoryZoomContainer extends VictoryContainer {
       return React.cloneElement(clipContainerComponent, {
         key: `ZoomClipContainer-${index}`,
         clipWidth: plottableWidth,
-        clipHeight: height,
-        translateX: rangeX[0],
+        clipHeight: plottableHeight,
+        translateX: Math.min(...rangeX),
+        translateY: Math.min(...rangeY),
         children: arr
       });
     };
@@ -99,10 +107,12 @@ export default class VictoryZoomContainer extends VictoryContainer {
     const childComponents = React.Children.toArray(props.children);
 
     return childComponents.map((child) => {
-      const {zoomDomain, cachedZoomDomain, currentDomain} = props;
+      const {currentDomain} = props;
+      const originalDomain = defaults({}, props.original, props.domain);
+      const zoomDomain = defaults({}, props.zoomDomain, props.domain);
+      const cachedZoomDomain = defaults({}, props.cachedZoomDomain, props.domain);
       const domain = isEqual(zoomDomain, cachedZoomDomain) ?
-        currentDomain || zoomDomain : zoomDomain;
-
+        defaults({}, currentDomain, originalDomain) : zoomDomain;
       return React.cloneElement(
         child, defaults({domain}, child.props)
       );