victory-brush-line - npm Package Compare versions

Comparing version 31.0.2 to 31.1.0

es/victory-brush-line.js

@@ -498,4 +498,4 @@ import _pick from "lodash/pick";
         },
+        // eslint-disable-next-line max-statements, complexity
         onMouseMove: function (evt, targetProps) {
-          // eslint-disable-line max-statements, complexity
           var isPanning = targetProps.isPanning,
@@ -502,0 +502,0 @@ isSelecting = targetProps.isSelecting,

lib/victory-brush-line.js

@@ -511,4 +511,4 @@ "use strict";
         },
+        // eslint-disable-next-line max-statements, complexity
         onMouseMove: function (evt, targetProps) {
-          // eslint-disable-line max-statements, complexity
           var isPanning = targetProps.isPanning,
@@ -515,0 +515,0 @@ isSelecting = targetProps.isSelecting,

package.json

 {
   "name": "victory-brush-line",
-  "version": "31.0.2",
+  "version": "31.1.0",
   "description": "Interactive Brush Line Component for Victory",
@@ -24,3 +24,3 @@ "keywords": [
     "prop-types": "^15.5.8",
-    "victory-core": "^31.0.2"
+    "victory-core": "^31.1.0"
   },
@@ -27,0 +27,0 @@ "scripts": {

README.md

@@ -1,2 +0,1 @@
-
 # VictoryBrushLine
@@ -34,3 +33,3 @@
 
-*default:* `allowDrag={true}`
+_default:_ `allowDrag={true}`
 
@@ -43,5 +42,4 @@ ### allowResize
 
-*default:* `allowResize={true}`
+_default:_ `allowResize={true}`
 
-
 ### brushAreaComponent
@@ -55,5 +53,4 @@
 
-*default:* `brushAreaComponent={<Box/>}`
+_default:_ `brushAreaComponent={<Box/>}`
 
-
 ### brushAreaStyle
@@ -76,3 +73,2 @@
 
-
 ### brushAreaWidth
@@ -84,3 +80,2 @@
 
-
 ### brushComponent
@@ -94,11 +89,11 @@
 
-*default:* `brushComponent={<Box/>}`
+_default:_ `brushComponent={<Box/>}`
 
 ### brushDomain
 
-`type:  array[low, high]`
+`type: array[low, high]`
 
 The optional `brushDomain` prop describes the highlighted state. This prop should be given as an array of the minimum and maximum values of the highlighted region.
 
-*example:* `brushDomain={[50, 100]}`
+_example:_ `brushDomain={[50, 100]}`
 
@@ -133,3 +128,2 @@ ### brushStyle
 
-
 ### dimension
@@ -141,3 +135,2 @@
 
-
 ### disable
@@ -155,3 +148,2 @@
 
-
 ### groupComponent
@@ -163,8 +155,7 @@
 
-*default:* `<g/>`
+_default:_ `<g/>`
 
-
 ### handleComponent
 
-`type: element `
+`type: element`
 
@@ -175,3 +166,3 @@ The `handleComponent` prop specifies the component to be rendered for each handle.
 
-*default:* `handleComponent={<Box/>}`
+_default:_ `handleComponent={<Box/>}`
 
@@ -199,5 +190,4 @@ ### handleStyle
 
-*default:* `handleWidth={10}`
+_default:_ `handleWidth={10}`
 
-
 ### lineComponent
@@ -211,5 +201,4 @@
 
-*default:* `lineComponent={<Axis/>}`
+_default:_ `lineComponent={<Axis/>}`
 
-
 ### onBrushDomainChange
@@ -220,5 +209,5 @@
 The `onBrushDomainChange` prop specifies a callback function which will be called whenever the brush domain changes. The callback provided will be called with the following arguments:
-  - `currentDomain`: The current brush domain
-  - `props`: the current set of props for `VictoryBrushLine`
 
+- `currentDomain`: The current brush domain
+- `props`: the current set of props for `VictoryBrushLine`
 
@@ -250,8 +239,6 @@ ### scale
 
-*default:* `width={10}`
+_default:_ `width={10}`
 
-
-
-[`VictoryBrushContainer`]: https://formidable.com/open-source/victory/docs/victory-brush-container
-[`Box`]: https://formidable.com/open-source/victory/docs/victory-primitives#box
-[`Axis`]: https://formidable.com/open-source/victory/docs/victory-primitives#axis
+[`victorybrushcontainer`]: https://formidable.com/open-source/victory/docs/victory-brush-container
+[`box`]: https://formidable.com/open-source/victory/docs/victory-primitives#box
+[`axis`]: https://formidable.com/open-source/victory/docs/victory-primitives#axis

src/victory-brush-line.js

@@ -83,3 +83,3 @@ import React from "react";
     fill: "black",
-    opacity: (d, a) => a ? 0.2 : 0.1 // eslint-disable-line no-magic-numbers
+    opacity: (d, a) => (a ? 0.2 : 0.1) // eslint-disable-line no-magic-numbers
   },
@@ -90,4 +90,5 @@ brushStyle: {
     fill: "black",
-    opacity: (d, a) => a ? 0.4 : 0.3 // eslint-disable-line no-magic-numbers
-  }, handleStyle: {
+    opacity: (d, a) => (a ? 0.4 : 0.3) // eslint-disable-line no-magic-numbers
+  },
+  handleStyle: {
     pointerEvents: "none",
@@ -134,188 +135,260 @@ stroke: "none",
     allowResize: true,
-    brushAreaComponent: <Box/>,
-    brushComponent: <Box/>,
-    groupComponent: <g/>,
-    handleComponent: <Box/>,
+    brushAreaComponent: <Box />,
+    brushComponent: <Box />,
+    groupComponent: <g />,
+    handleComponent: <Box />,
     handleWidth: 10,
-    lineComponent: <LineSegment/>,
+    lineComponent: <LineSegment />,
     width: 10
   };
 
-  static defaultEvents = function (props) {
-    return props.disable ? undefined : [{
-      target: props.type,
-      eventHandlers: {
-        onMouseEnter: (evt, targetProps) => {
-          evt.preventDefault();
-          const { dimension, allowResize, brushDomain } = targetProps;
-          const parentSVG = targetProps.parentSVG || Selection.getParentSVG(evt);
-          const position = Selection.getSVGEventCoordinates(evt, parentSVG)[dimension];
-          const fullDomain = getFullDomain(targetProps);
-          const currentDomain = brushDomain || fullDomain;
-          const range = toRange(targetProps, currentDomain);
-          const activeHandle = allowResize && getActiveHandle(targetProps, position, range);
-          const activeBrushes = {
-            brushArea: !targetProps.brushDomain,
-            brush: withinBound(position, range) && !isEqual(fullDomain, currentDomain),
-            minHandle: activeHandle === "min" || activeHandle === "both",
-            maxHandle: activeHandle === "min" || activeHandle === "both"
-          };
-          return [{
-            mutation: () => ({ activeBrushes, brushDomain: targetProps.brushDomain, parentSVG })
-          }];
-        },
-        onMouseDown: (evt, targetProps) => {
-          evt.preventDefault();
-          const {
-            allowResize, allowDrag, allowDraw, dimension, activeBrushes, brushDomain
-          } = targetProps;
+  static defaultEvents = function(props) {
+    return props.disable
+      ? undefined
+      : [
+          {
+            target: props.type,
+            eventHandlers: {
+              onMouseEnter: (evt, targetProps) => {
+                evt.preventDefault();
+                const { dimension, allowResize, brushDomain } = targetProps;
+                const parentSVG = targetProps.parentSVG || Selection.getParentSVG(evt);
+                const position = Selection.getSVGEventCoordinates(evt, parentSVG)[dimension];
+                const fullDomain = getFullDomain(targetProps);
+                const currentDomain = brushDomain || fullDomain;
+                const range = toRange(targetProps, currentDomain);
+                const activeHandle = allowResize && getActiveHandle(targetProps, position, range);
+                const activeBrushes = {
+                  brushArea: !targetProps.brushDomain,
+                  brush: withinBound(position, range) && !isEqual(fullDomain, currentDomain),
+                  minHandle: activeHandle === "min" || activeHandle === "both",
+                  maxHandle: activeHandle === "min" || activeHandle === "both"
+                };
+                return [
+                  {
+                    mutation: () => ({
+                      activeBrushes,
+                      brushDomain: targetProps.brushDomain,
+                      parentSVG
+                    })
+                  }
+                ];
+              },
+              onMouseDown: (evt, targetProps) => {
+                evt.preventDefault();
+                const {
+                  allowResize,
+                  allowDrag,
+                  allowDraw,
+                  dimension,
+                  activeBrushes,
+                  brushDomain
+                } = targetProps;
 
-          // Don't trigger events for static brushes
-          if (!allowResize && !allowDrag) {
-            return [];
-          }
+                // Don't trigger events for static brushes
+                if (!allowResize && !allowDrag) {
+                  return [];
+                }
 
-          const fullDomain = getFullDomain(targetProps);
-          const currentDomain = brushDomain || fullDomain;
-          const parentSVG = targetProps.parentSVG || Selection.getParentSVG(evt);
-          const position = Selection.getSVGEventCoordinates(evt, parentSVG)[dimension];
-          const range = toRange(targetProps, currentDomain);
-          const activeHandle = allowResize && getActiveHandle(targetProps, position, range);
-          // If the event occurs in any of the handle regions, start a resize
-          if (activeHandle) {
-            return [{
-              mutation: () => {
-                return ({
-                  parentSVG,
-                  isSelecting: true, activeHandle,
-                  brushDomain: currentDomain,
-                  startPosition: position, activeBrushes
-                });
-              }
-            }];
-          } else if (withinBound(position, range) && !isEqual(fullDomain, currentDomain)) {
-            // if the event occurs within a selected region start a panning event, unless the whole
-            // domain is selected
-            return [{
-              mutation: () => ({
-                isPanning: allowDrag, startPosition: position,
-                brushDomain: currentDomain, activeBrushes, parentSVG
-              })
-            }];
-          } else {
-            // if the event occurs outside the region, or if the whole domain is selected,
-            // start a new selection
-            return allowDraw ? [{
-              mutation: () => ({
-                isSelecting: allowResize,
-                brushDomain: null,
-                startPosition: position,
-                activeBrushes, parentSVG
-              })
-            }] : [];
-          }
-        },
-        onMouseMove: (evt, targetProps) => { // eslint-disable-line max-statements, complexity
-          const {
-            isPanning, isSelecting, allowResize, allowDrag,
-            dimension, onBrushDomainChange, brushDomain
-          } = targetProps;
-          if (isPanning || isSelecting) {
-            evt.preventDefault();
-            evt.stopPropagation();
-          }
-          const parentSVG = targetProps.parentSVG || Selection.getParentSVG(evt);
-          const position = Selection.getSVGEventCoordinates(evt, parentSVG)[dimension];
-          const fullDomain = getFullDomain(targetProps);
-          const domain = brushDomain || fullDomain;
-          const initialRange = toRange(targetProps, domain);
-          const activeHandle = getActiveHandle(targetProps, position, initialRange);
-          const activeBrushes = {
-            brushArea: !targetProps.brushDomain,
-            brush: withinBound(position, initialRange) && !isEqual(fullDomain, domain),
-            minHandle: activeHandle === "min" || activeHandle === "both",
-            maxHandle: activeHandle === "max" || activeHandle === "both"
-          };
-          if (!targetProps.isPanning && !targetProps.isSelecting) {
-            return [{
-              mutation: () => ({
-                activeBrushes, brushDomain: targetProps.brushDomain, parentSVG
-              })
-            }];
-          }
-          if (allowDrag && isPanning) {
-            const fullRange = getFullRange(targetProps);
-            const range = panBox(targetProps, position);
-            const currentDomain = toDomain(targetProps, range);
-            const startPosition = Math.max(...range) >= Math.max(...fullRange) ||
-              Math.min(...range) <= Math.min(...fullRange) ?
-              targetProps.startPosition : position;
-            const mutatedProps = {
-              startPosition, isPanning: true, brushDomain: currentDomain,
-              activeBrushes: { brush: true }, parentSVG
-            };
+                const fullDomain = getFullDomain(targetProps);
+                const currentDomain = brushDomain || fullDomain;
+                const parentSVG = targetProps.parentSVG || Selection.getParentSVG(evt);
+                const position = Selection.getSVGEventCoordinates(evt, parentSVG)[dimension];
+                const range = toRange(targetProps, currentDomain);
+                const activeHandle = allowResize && getActiveHandle(targetProps, position, range);
+                // If the event occurs in any of the handle regions, start a resize
+                if (activeHandle) {
+                  return [
+                    {
+                      mutation: () => {
+                        return {
+                          parentSVG,
+                          isSelecting: true,
+                          activeHandle,
+                          brushDomain: currentDomain,
+                          startPosition: position,
+                          activeBrushes
+                        };
+                      }
+                    }
+                  ];
+                } else if (withinBound(position, range) && !isEqual(fullDomain, currentDomain)) {
+                  // if the event occurs within a selected region start a panning event, unless the whole
+                  // domain is selected
+                  return [
+                    {
+                      mutation: () => ({
+                        isPanning: allowDrag,
+                        startPosition: position,
+                        brushDomain: currentDomain,
+                        activeBrushes,
+                        parentSVG
+                      })
+                    }
+                  ];
+                } else {
+                  // if the event occurs outside the region, or if the whole domain is selected,
+                  // start a new selection
+                  return allowDraw
+                    ? [
+                        {
+                          mutation: () => ({
+                            isSelecting: allowResize,
+                            brushDomain: null,
+                            startPosition: position,
+                            activeBrushes,
+                            parentSVG
+                          })
+                        }
+                      ]
+                    : [];
+                }
+              },
+              // eslint-disable-next-line max-statements, complexity
+              onMouseMove: (evt, targetProps) => {
+                const {
+                  isPanning,
+                  isSelecting,
+                  allowResize,
+                  allowDrag,
+                  dimension,
+                  onBrushDomainChange,
+                  brushDomain
+                } = targetProps;
+                if (isPanning || isSelecting) {
+                  evt.preventDefault();
+                  evt.stopPropagation();
+                }
+                const parentSVG = targetProps.parentSVG || Selection.getParentSVG(evt);
+                const position = Selection.getSVGEventCoordinates(evt, parentSVG)[dimension];
+                const fullDomain = getFullDomain(targetProps);
+                const domain = brushDomain || fullDomain;
+                const initialRange = toRange(targetProps, domain);
+                const activeHandle = getActiveHandle(targetProps, position, initialRange);
+                const activeBrushes = {
+                  brushArea: !targetProps.brushDomain,
+                  brush: withinBound(position, initialRange) && !isEqual(fullDomain, domain),
+                  minHandle: activeHandle === "min" || activeHandle === "both",
+                  maxHandle: activeHandle === "max" || activeHandle === "both"
+                };
+                if (!targetProps.isPanning && !targetProps.isSelecting) {
+                  return [
+                    {
+                      mutation: () => ({
+                        activeBrushes,
+                        brushDomain: targetProps.brushDomain,
+                        parentSVG
+                      })
+                    }
+                  ];
+                }
+                if (allowDrag && isPanning) {
+                  const fullRange = getFullRange(targetProps);
+                  const range = panBox(targetProps, position);
+                  const currentDomain = toDomain(targetProps, range);
+                  const startPosition =
+                    Math.max(...range) >= Math.max(...fullRange) ||
+                    Math.min(...range) <= Math.min(...fullRange)
+                      ? targetProps.startPosition
+                      : position;
+                  const mutatedProps = {
+                    startPosition,
+                    isPanning: true,
+                    brushDomain: currentDomain,
+                    activeBrushes: { brush: true },
+                    parentSVG
+                  };
 
-            if (isFunction(onBrushDomainChange)) {
-              onBrushDomainChange(currentDomain, defaults({}, mutatedProps, targetProps));
-            }
-            return [{
-              mutation: () => mutatedProps
-            }];
-          } else if (allowResize && isSelecting) {
-            let currentDomain = brushDomain || getMinimumDomain();
-            const range = toRange(targetProps, currentDomain);
-            const oppositeHandle = targetProps.activeHandle === "min" ? "max" : "min";
-            const handle = targetProps.activeHandle &&
-              getActiveHandle(targetProps, position, range) === "both" ?
-                oppositeHandle : targetProps.activeHandle;
-            if (!handle) {
-              currentDomain = toDomain(targetProps, [targetProps.startPosition, position]);
-            } else {
-              const rangeMax = dimension === "x" ? Math.max(...range) : Math.min(...range);
-              const rangeMin = dimension === "x" ? Math.min(...range) : Math.max(...range);
-              const min = handle === "max" ? rangeMin : position;
-              const max = handle === "min" ? rangeMax : position;
-              currentDomain = toDomain(targetProps, [min, max]);
-            }
-            const mutatedProps = {
-              brushDomain: currentDomain, startPosition: targetProps.startPosition,
-              isSelecting, activeHandle: handle, parentSVG,
-              activeBrushes: {
-                brush: true, minHandle: activeHandle === "min", maxHandle: activeHandle === "max"
+                  if (isFunction(onBrushDomainChange)) {
+                    onBrushDomainChange(currentDomain, defaults({}, mutatedProps, targetProps));
+                  }
+                  return [
+                    {
+                      mutation: () => mutatedProps
+                    }
+                  ];
+                } else if (allowResize && isSelecting) {
+                  let currentDomain = brushDomain || getMinimumDomain();
+                  const range = toRange(targetProps, currentDomain);
+                  const oppositeHandle = targetProps.activeHandle === "min" ? "max" : "min";
+                  const handle =
+                    targetProps.activeHandle &&
+                    getActiveHandle(targetProps, position, range) === "both"
+                      ? oppositeHandle
+                      : targetProps.activeHandle;
+                  if (!handle) {
+                    currentDomain = toDomain(targetProps, [targetProps.startPosition, position]);
+                  } else {
+                    const rangeMax = dimension === "x" ? Math.max(...range) : Math.min(...range);
+                    const rangeMin = dimension === "x" ? Math.min(...range) : Math.max(...range);
+                    const min = handle === "max" ? rangeMin : position;
+                    const max = handle === "min" ? rangeMax : position;
+                    currentDomain = toDomain(targetProps, [min, max]);
+                  }
+                  const mutatedProps = {
+                    brushDomain: currentDomain,
+                    startPosition: targetProps.startPosition,
+                    isSelecting,
+                    activeHandle: handle,
+                    parentSVG,
+                    activeBrushes: {
+                      brush: true,
+                      minHandle: activeHandle === "min",
+                      maxHandle: activeHandle === "max"
+                    }
+                  };
+                  if (isFunction(onBrushDomainChange)) {
+                    onBrushDomainChange(currentDomain, defaults({}, mutatedProps, targetProps));
+                  }
+                  return [
+                    {
+                      mutation: () => mutatedProps
+                    }
+                  ];
+                }
+                return [];
+              },
+              onMouseUp(evt, targetProps) {
+                const {
+                  onBrushDomainChange,
+                  brushDomain,
+                  allowResize,
+                  activeBrushes
+                } = targetProps;
+                // if the mouse hasn't moved since a mouseDown event, select the whole domain region
+                const mutatedProps = {
+                  isPanning: false,
+                  isSelecting: false,
+                  activeHandle: null,
+                  startPosition: null,
+                  brushDomain,
+                  activeBrushes
+                };
+                if (allowResize && isFunction(onBrushDomainChange)) {
+                  onBrushDomainChange(brushDomain, defaults({}, mutatedProps, targetProps));
+                }
+                return [
+                  {
+                    mutation: () => mutatedProps
+                  }
+                ];
+              },
+              onMouseLeave(evt, targetProps) {
+                const { brushDomain } = targetProps;
+                return [
+                  {
+                    mutation: () => ({
+                      isPanning: false,
+                      isSelecting: false,
+                      activeHandle: null,
+                      startPosition: null,
+                      brushDomain,
+                      activeBrushes: {}
+                    })
+                  }
+                ];
               }
-            };
-            if (isFunction(onBrushDomainChange)) {
-              onBrushDomainChange(currentDomain, defaults({}, mutatedProps, targetProps));
             }
-            return [{
-              mutation: () => (mutatedProps)
-            }];
           }
-          return [];
-        },
-        onMouseUp(evt, targetProps) {
-          const { onBrushDomainChange, brushDomain, allowResize, activeBrushes } = targetProps;
-          // if the mouse hasn't moved since a mouseDown event, select the whole domain region
-          const mutatedProps = {
-            isPanning: false, isSelecting: false, activeHandle: null, startPosition: null,
-            brushDomain, activeBrushes
-          };
-          if (allowResize && isFunction(onBrushDomainChange)) {
-            onBrushDomainChange(brushDomain, defaults({}, mutatedProps, targetProps));
-          }
-          return [{
-            mutation: () => mutatedProps
-          }];
-        },
-        onMouseLeave(evt, targetProps) {
-          const { brushDomain } = targetProps;
-          return [{
-            mutation: () => ({
-              isPanning: false, isSelecting: false, activeHandle: null, startPosition: null,
-              brushDomain, activeBrushes: {}
-            })
-          }];
-        }
-      }
-    }];
+        ];
   };
@@ -327,5 +400,16 @@
     const range = toRange(props, domain);
-    const coordinates = dimension === "x" ?
-      { y1: props.y1, y2: props.y2, x1: Math.min(...range), x2: Math.max(...range) } :
-      { x1: props.x1, x2: props.x2, y1: Math.min(...range), y2: Math.max(...range) };
+    const coordinates =
+      dimension === "x"
+        ? {
+            y1: props.y1,
+            y2: props.y2,
+            x1: Math.min(...range),
+            x2: Math.max(...range)
+          }
+        : {
+            x1: props.x1,
+            x2: props.x2,
+            y1: Math.min(...range),
+            y2: Math.max(...range)
+          };
     const { x1, x2, y1, y2 } = coordinates;
@@ -349,4 +433,4 @@ const offset = {
     const range = toRange(props, domain);
-    const defaultX = Math.min(x1, x2) - (brushWidth / 2);
-    const defaultY = Math.min(y1, y2) - (brushWidth / 2);
+    const defaultX = Math.min(x1, x2) - brushWidth / 2;
+    const defaultY = Math.min(y1, y2) - brushWidth / 2;
     const x = {
@@ -380,5 +464,3 @@ min: dimension === "x" ? Math.min(...range) - handleWidth / 2 : defaultX,
   renderHandles(props) {
-    const {
-      handleComponent, handleStyle, id, brushDomain, datum = {}, activeBrushes = {}
-    } = props;
+    const { handleComponent, handleStyle, id, brushDomain, datum = {}, activeBrushes = {} } = props;
     if (!brushDomain) {
@@ -391,6 +473,9 @@ return null;
     const maxDatum = assign({ handleValue: Collection.getMaxValue(brushDomain) }, datum);
-    const minHandleProps = assign({
-      key: `${id}-min`,
-      style: Helpers.evaluateStyle(style, minDatum, activeBrushes.minHandle)
-    }, handleDimensions.min);
+    const minHandleProps = assign(
+      {
+        key: `${id}-min`,
+        style: Helpers.evaluateStyle(style, minDatum, activeBrushes.minHandle)
+      },
+      handleDimensions.min
+    );
     const maxHandleProps = assign(
@@ -400,3 +485,5 @@ {
         style: Helpers.evaluateStyle(style, maxDatum, activeBrushes.maxHandle)
-      }, handleDimensions.max);
+      },
+      handleDimensions.max
+    );
     return [
@@ -409,5 +496,3 @@ React.cloneElement(handleComponent, minHandleProps),
   renderBrush(props) {
-    const {
-      brushComponent, brushStyle, activeBrushes = {}, datum = {}, brushDomain
-    } = props;
+    const { brushComponent, brushStyle, activeBrushes = {}, datum = {}, brushDomain } = props;
     if (!brushDomain) {
@@ -437,3 +522,10 @@ return null;
     const filteredProps = pick(props, [
-      "x1", "x2", "y1", "y2", "datum", "scale", "active", "style"
+      "x1",
+      "x2",
+      "y1",
+      "y2",
+      "datum",
+      "scale",
+      "active",
+      "style"
     ]);
@@ -440,0 +532,0 @@ return React.cloneElement(props.lineComponent, filteredProps);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1208124

increased by0.63%

Lines of code

22176

increased by0.85%

Worsened metrics

Number of lines in readme file

230

decreased by-5.35%

Dependency changes

• Updatedvictory-core@^31.1.0