victory-tooltip 30.6.1 → 31.2.0

package/es/victory-tooltip.js

@@ -79,14 +79,12 @@ function (_React$Component) {
   }, {
     key: "getVerticalOrientations",
     value: function getVerticalOrientations(degrees) {
+      // eslint-disable-next-line no-magic-numbers
       if (degrees < 45 || degrees > 315) {
-        // eslint-disable-line no-magic-numbers
-        return "right";
+        return "right"; // eslint-disable-next-line no-magic-numbers
       } else if (degrees >= 45 && degrees <= 135) {
-        // eslint-disable-line no-magic-numbers
-        return "top";
+        return "top"; // eslint-disable-next-line no-magic-numbers
       } else if (degrees > 135 && degrees < 225) {
-        // eslint-disable-line no-magic-numbers
         return "left";
       } else {
         return "bottom";

package/lib/victory-tooltip.js

@@ -95,14 +95,12 @@ function (_React$Component) {
   }, {
     key: "getVerticalOrientations",
     value: function getVerticalOrientations(degrees) {
+      // eslint-disable-next-line no-magic-numbers
       if (degrees < 45 || degrees > 315) {
-        // eslint-disable-line no-magic-numbers
-        return "right";
+        return "right"; // eslint-disable-next-line no-magic-numbers
       } else if (degrees >= 45 && degrees <= 135) {
-        // eslint-disable-line no-magic-numbers
-        return "top";
+        return "top"; // eslint-disable-next-line no-magic-numbers
       } else if (degrees > 135 && degrees < 225) {
-        // eslint-disable-line no-magic-numbers
         return "left";
       } else {
         return "bottom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-tooltip",
-  "version": "30.6.1",
+  "version": "31.2.0",
   "description": "Tooltip Component for Victory",
   "keywords": [
     "data visualization",
@@ -21,7 +21,7 @@
   "dependencies": {
     "lodash": "^4.17.5",
     "prop-types": "^15.5.8",
-    "victory-core": "^30.6.1"
+    "victory-core": "^31.2.0"
   },
   "scripts": {
     "version": "nps build-libs && nps build-dists"

package/src/flyout.js

@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import { Helpers, CommonProps, Path } from "victory-core";
 
 export default class Flyout extends React.Component {
-
   static propTypes = {
     ...CommonProps.primitiveProps,
     cornerRadius: PropTypes.number,
@@ -22,7 +21,7 @@ export default class Flyout extends React.Component {
   };
 
   static defaultProps = {
-    pathComponent: <Path/>
+    pathComponent: <Path />
   };
 
   getVerticalPath(props) {
@@ -30,10 +29,10 @@ export default class Flyout extends React.Component {
     const sign = orientation === "top" ? 1 : -1;
     const x = props.x + (props.dx || 0);
     const y = props.y - sign * (props.dy || 0);
-    const pointerEdge = y - (sign * pointerLength);
-    const oppositeEdge = y - (sign * pointerLength) - (sign * height);
-    const rightEdge = x + (width / 2);
-    const leftEdge = x - (width / 2);
+    const pointerEdge = y - sign * pointerLength;
+    const oppositeEdge = y - sign * pointerLength - sign * height;
+    const rightEdge = x + width / 2;
+    const leftEdge = x - width / 2;
     const direction = orientation === "top" ? "0 0 0" : "0 0 1";
     const arc = `${cornerRadius} ${cornerRadius} ${direction}`;
     return `M ${x - pointerWidth / 2}, ${pointerEdge}
@@ -56,7 +55,7 @@ export default class Flyout extends React.Component {
     const x = props.x + sign * (props.dx || 0);
     const y = props.y - (props.dy || 0);
     const pointerEdge = x + sign * pointerLength;
-    const oppositeEdge = x + (sign * pointerLength) + (sign * width);
+    const oppositeEdge = x + sign * pointerLength + sign * width;
     const bottomEdge = y + height / 2;
     const topEdge = y - height / 2;
     const direction = orientation === "right" ? "0 0 0" : "0 0 1";
@@ -77,19 +76,34 @@ export default class Flyout extends React.Component {
 
   getFlyoutPath(props) {
     const orientation = props.orientation || "top";
-    return orientation === "left" || orientation === "right" ?
-      this.getHorizontalPath(props) : this.getVerticalPath(props);
+    return orientation === "left" || orientation === "right"
+      ? this.getHorizontalPath(props)
+      : this.getVerticalPath(props);
   }
 
   render() {
     const {
-      datum, active, role, shapeRendering, className, events, pathComponent, transform, clipPath
+      datum,
+      active,
+      role,
+      shapeRendering,
+      className,
+      events,
+      pathComponent,
+      transform,
+      clipPath
     } = this.props;
     const style = Helpers.evaluateStyle(this.props.style, datum, active);
     const path = this.getFlyoutPath(this.props);
-    return React.cloneElement(
-      pathComponent,
-      { style, className, shapeRendering, role, events, transform, d: path, clipPath }
-    );
+    return React.cloneElement(pathComponent, {
+      style,
+      className,
+      shapeRendering,
+      role,
+      events,
+      transform,
+      d: path,
+      clipPath
+    });
   }
 }

package/src/victory-tooltip.js

@@ -1,7 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
-  PropTypes as CustomPropTypes, TextSize, Helpers, LabelHelpers, VictoryLabel, VictoryTheme,
+  PropTypes as CustomPropTypes,
+  TextSize,
+  Helpers,
+  LabelHelpers,
+  VictoryLabel,
+  VictoryTheme,
   VictoryPortal
 } from "victory-core";
 import Flyout from "./flyout";
@@ -18,33 +23,18 @@ export default class VictoryTooltip extends React.Component {
 
   static propTypes = {
     activateData: PropTypes.bool,
-    active: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.func
-    ]),
+    active: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     angle: PropTypes.number,
-    cornerRadius: PropTypes.oneOfType([
-      CustomPropTypes.nonNegative,
-      PropTypes.func
-    ]),
+    cornerRadius: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
     data: PropTypes.array,
     datum: PropTypes.object,
-    dx: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.func
-    ]),
-    dy: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.func
-    ]),
+    dx: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+    dy: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
     events: PropTypes.object,
     flyoutComponent: PropTypes.element,
     flyoutStyle: PropTypes.object,
     groupComponent: PropTypes.element,
-    height: PropTypes.oneOfType([
-      CustomPropTypes.nonNegative,
-      PropTypes.func
-    ]),
+    height: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
     horizontal: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -53,20 +43,11 @@ export default class VictoryTooltip extends React.Component {
       PropTypes.oneOf(["top", "bottom", "left", "right"]),
       PropTypes.func
     ]),
-    pointerLength: PropTypes.oneOfType([
-      CustomPropTypes.nonNegative,
-      PropTypes.func
-    ]),
-    pointerWidth: PropTypes.oneOfType([
-      CustomPropTypes.nonNegative,
-      PropTypes.func
-    ]),
+    pointerLength: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
+    pointerWidth: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
     polar: PropTypes.bool,
     renderInPortal: PropTypes.bool,
-    style: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.array
-    ]),
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     text: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.number,
@@ -74,10 +55,7 @@ export default class VictoryTooltip extends React.Component {
       PropTypes.array
     ]),
     theme: PropTypes.object,
-    width: PropTypes.oneOfType([
-      CustomPropTypes.nonNegative,
-      PropTypes.func
-    ]),
+    width: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
     x: PropTypes.number,
     y: PropTypes.number
   };
@@ -85,55 +63,56 @@ export default class VictoryTooltip extends React.Component {
   static defaultProps = {
     active: false,
     renderInPortal: true,
-    labelComponent: <VictoryLabel/>,
-    flyoutComponent: <Flyout/>,
-    groupComponent: <g/>
+    labelComponent: <VictoryLabel />,
+    flyoutComponent: <Flyout />,
+    groupComponent: <g />
   };
 
   static defaultEvents = (props) => {
-    return [{
-      target: "data",
-      eventHandlers: {
-        onMouseOver: () => {
-          return props.activateData ?
-            [
-              { target: "labels", mutation: () => ({ active: true }) },
-              { target: "data", mutation: () => ({ active: true }) }
-            ] :
-            [{ target: "labels", mutation: () => ({ active: true }) }];
-        },
-        onTouchStart: () => {
-          return props.activateData ?
-            [
-              { target: "labels", mutation: () => ({ active: true }) },
-              { target: "data", mutation: () => ({ active: true }) }
-            ] :
-            [{ target: "labels", mutation: () => ({ active: true }) }];
-        },
-        onMouseOut: () => {
-          return props.activateData ?
-            [
-              { target: "labels", mutation: () => ({ active: undefined }) },
-              { target: "data", mutation: () => ({ active: undefined }) }
-            ] :
-            [{ target: "labels", mutation: () => ({ active: undefined }) }];
-        },
-        onTouchEnd: () => {
-          return props.activateData ?
-            [
-              { target: "labels", mutation: () => ({ active: undefined }) },
-              { target: "data", mutation: () => ({ active: undefined }) }
-            ] :
-            [{ target: "labels", mutation: () => ({ active: undefined }) }];
+    return [
+      {
+        target: "data",
+        eventHandlers: {
+          onMouseOver: () => {
+            return props.activateData
+              ? [
+                  { target: "labels", mutation: () => ({ active: true }) },
+                  { target: "data", mutation: () => ({ active: true }) }
+                ]
+              : [{ target: "labels", mutation: () => ({ active: true }) }];
+          },
+          onTouchStart: () => {
+            return props.activateData
+              ? [
+                  { target: "labels", mutation: () => ({ active: true }) },
+                  { target: "data", mutation: () => ({ active: true }) }
+                ]
+              : [{ target: "labels", mutation: () => ({ active: true }) }];
+          },
+          onMouseOut: () => {
+            return props.activateData
+              ? [
+                  { target: "labels", mutation: () => ({ active: undefined }) },
+                  { target: "data", mutation: () => ({ active: undefined }) }
+                ]
+              : [{ target: "labels", mutation: () => ({ active: undefined }) }];
+          },
+          onTouchEnd: () => {
+            return props.activateData
+              ? [
+                  { target: "labels", mutation: () => ({ active: undefined }) },
+                  { target: "data", mutation: () => ({ active: undefined }) }
+                ]
+              : [{ target: "labels", mutation: () => ({ active: undefined }) }];
+          }
         }
       }
-    }];
+    ];
   };
 
   constructor(props) {
     super(props);
-    this.id = props.id === undefined ?
-      uniqueId("tooltip-") : props.id;
+    this.id = props.id === undefined ? uniqueId("tooltip-") : props.id;
   }
 
   getDefaultOrientation(props) {
@@ -160,11 +139,14 @@ export default class VictoryTooltip extends React.Component {
   }
 
   getVerticalOrientations(degrees) {
-    if (degrees < 45 || degrees > 315) { // eslint-disable-line no-magic-numbers
+    // eslint-disable-next-line no-magic-numbers
+    if (degrees < 45 || degrees > 315) {
       return "right";
-    } else if (degrees >= 45 && degrees <= 135) { // eslint-disable-line no-magic-numbers
+      // eslint-disable-next-line no-magic-numbers
+    } else if (degrees >= 45 && degrees <= 135) {
       return "top";
-    } else if (degrees > 135 && degrees < 225) { // eslint-disable-line no-magic-numbers
+      // eslint-disable-next-line no-magic-numbers
+    } else if (degrees > 135 && degrees < 225) {
       return "left";
     } else {
       return "bottom";
@@ -173,59 +155,72 @@ export default class VictoryTooltip extends React.Component {
 
   getEvaluatedProps(props) {
     const {
-      horizontal, datum, pointerLength, pointerWidth, cornerRadius,
-      width, height, dx, dy, text, active
+      horizontal,
+      datum,
+      pointerLength,
+      pointerWidth,
+      cornerRadius,
+      width,
+      height,
+      dx,
+      dy,
+      text,
+      active
     } = props;
 
-    const style = Array.isArray(props.style) ?
-      props.style.map((s) => Helpers.evaluateStyle(s, datum, active)) :
-      Helpers.evaluateStyle(props.style, datum, active);
+    const style = Array.isArray(props.style)
+      ? props.style.map((s) => Helpers.evaluateStyle(s, datum, active))
+      : Helpers.evaluateStyle(props.style, datum, active);
     const flyoutStyle = Helpers.evaluateStyle(props.flyoutStyle, datum, active);
-    const padding = flyoutStyle && flyoutStyle.padding || 0;
+    const padding = (flyoutStyle && flyoutStyle.padding) || 0;
     const defaultDx = horizontal ? padding : 0;
     const defaultDy = horizontal ? 0 : padding;
-    const orientation = Helpers.evaluateProp(props.orientation, datum, active) ||
-      this.getDefaultOrientation(props);
-    return assign(
-      {},
-      props,
-      {
-        style,
-        flyoutStyle,
-        orientation,
-        dx: dx !== undefined ? Helpers.evaluateProp(dx, datum, active) : defaultDx,
-        dy: dy !== undefined ? Helpers.evaluateProp(dy, datum, active) : defaultDy,
-        cornerRadius: Helpers.evaluateProp(cornerRadius, datum, active),
-        pointerLength: Helpers.evaluateProp(pointerLength, datum, active),
-        pointerWidth: Helpers.evaluateProp(pointerWidth, datum, active),
-        width: Helpers.evaluateProp(width, datum, active),
-        height: Helpers.evaluateProp(height, datum, active),
-        active: Helpers.evaluateProp(active, datum, active),
-        text: Helpers.evaluateProp(text, datum, active)
-      }
-    );
+    const orientation =
+      Helpers.evaluateProp(props.orientation, datum, active) || this.getDefaultOrientation(props);
+    return assign({}, props, {
+      style,
+      flyoutStyle,
+      orientation,
+      dx: dx !== undefined ? Helpers.evaluateProp(dx, datum, active) : defaultDx,
+      dy: dy !== undefined ? Helpers.evaluateProp(dy, datum, active) : defaultDy,
+      cornerRadius: Helpers.evaluateProp(cornerRadius, datum, active),
+      pointerLength: Helpers.evaluateProp(pointerLength, datum, active),
+      pointerWidth: Helpers.evaluateProp(pointerWidth, datum, active),
+      width: Helpers.evaluateProp(width, datum, active),
+      height: Helpers.evaluateProp(height, datum, active),
+      active: Helpers.evaluateProp(active, datum, active),
+      text: Helpers.evaluateProp(text, datum, active)
+    });
   }
 
   getCalculatedValues(props) {
     const { style, text, datum, active } = props;
     const theme = props.theme || VictoryTheme.grayscale;
-    const defaultLabelStyles = theme && theme.tooltip && theme.tooltip.style ?
-      theme.tooltip.style : {};
-    const baseLabelStyle = Array.isArray(style) ?
-      style.map((s) => defaults({}, s, defaultLabelStyles)) :
-      defaults({}, style, defaultLabelStyles);
-    const defaultFlyoutStyles = theme && theme.tooltip && theme.tooltip.flyoutStyle ?
-      theme.tooltip.flyoutStyle : {};
-    const flyoutStyle = props.flyoutStyle ?
-      defaults({}, props.flyoutStyle, defaultFlyoutStyles) : defaultFlyoutStyles;
-    const labelStyle = Array.isArray(baseLabelStyle) ?
-      baseLabelStyle.map((s) => Helpers.evaluateStyle(s, datum, active)) :
-      Helpers.evaluateStyle(baseLabelStyle, datum, active);
+    const defaultLabelStyles =
+      theme && theme.tooltip && theme.tooltip.style ? theme.tooltip.style : {};
+    const baseLabelStyle = Array.isArray(style)
+      ? style.map((s) => defaults({}, s, defaultLabelStyles))
+      : defaults({}, style, defaultLabelStyles);
+    const defaultFlyoutStyles =
+      theme && theme.tooltip && theme.tooltip.flyoutStyle ? theme.tooltip.flyoutStyle : {};
+    const flyoutStyle = props.flyoutStyle
+      ? defaults({}, props.flyoutStyle, defaultFlyoutStyles)
+      : defaultFlyoutStyles;
+    const labelStyle = Array.isArray(baseLabelStyle)
+      ? baseLabelStyle.map((s) => Helpers.evaluateStyle(s, datum, active))
+      : Helpers.evaluateStyle(baseLabelStyle, datum, active);
     const labelSize = TextSize.approximateTextSize(text, labelStyle);
     const flyoutDimensions = this.getDimensions(props, labelSize, labelStyle);
     const flyoutCenter = this.getFlyoutCenter(props, flyoutDimensions);
     const transform = this.getTransform(props);
-    return { labelStyle, flyoutStyle, labelSize, flyoutDimensions, flyoutCenter, transform };
+    return {
+      labelStyle,
+      flyoutStyle,
+      labelSize,
+      flyoutDimensions,
+      flyoutCenter,
+      transform
+    };
   }
 
   getTransform(props) {
@@ -233,7 +228,6 @@ export default class VictoryTooltip extends React.Component {
     const labelStyle = style || {};
     const angle = labelStyle.angle || props.angle || this.getDefaultAngle(props);
     return angle ? `rotate(${angle} ${x} ${y})` : undefined;
-
   }
 
   // eslint-disable-next-line complexity
@@ -243,7 +237,7 @@ export default class VictoryTooltip extends React.Component {
       return 0;
     }
     const degrees = LabelHelpers.getDegrees(props, datum);
-    const sign = (degrees > 90 && degrees < 180 || degrees > 270) ? 1 : -1;
+    const sign = (degrees > 90 && degrees < 180) || degrees > 270 ? 1 : -1;
     const labelRotation = labelPlacement === "perpendicular" ? 0 : 90;
     let angle;
     if (degrees === 0 || degrees === 180) {
@@ -262,10 +256,14 @@ export default class VictoryTooltip extends React.Component {
     const xSign = orientation === "left" ? -1 : 1;
     const ySign = orientation === "bottom" ? -1 : 1;
     return {
-      x: orientation === "left" || orientation === "right" ?
-        x + xSign * (pointerLength + (width / 2) + dx) : x + dx,
-      y: orientation === "top" || orientation === "bottom" ?
-        y - ySign * (pointerLength + (height / 2) + dy) : y - dy
+      x:
+        orientation === "left" || orientation === "right"
+          ? x + xSign * (pointerLength + width / 2 + dx)
+          : x + dx,
+      y:
+        orientation === "top" || orientation === "bottom"
+          ? y - ySign * (pointerLength + height / 2 + dy)
+          : y - dy
     };
   }
 
@@ -282,18 +280,22 @@ export default class VictoryTooltip extends React.Component {
     const padding = this.getLabelPadding(labelStyle);
     const getHeight = () => {
       const calculatedHeight = labelSize.height + padding;
-      const minHeight = orientation === "top" || orientation === "bottom" ?
-        2 * cornerRadius : 2 * cornerRadius + pointerWidth;
+      const minHeight =
+        orientation === "top" || orientation === "bottom"
+          ? 2 * cornerRadius
+          : 2 * cornerRadius + pointerWidth;
       return Math.max(minHeight, calculatedHeight);
     };
     const getWidth = () => {
       const calculatedWidth = labelSize.width + padding;
-      const minWidth = orientation === "left" || orientation === "right" ?
-        2 * cornerRadius + pointerLength : 2 * cornerRadius;
+      const minWidth =
+        orientation === "left" || orientation === "right"
+          ? 2 * cornerRadius + pointerLength
+          : 2 * cornerRadius;
       return Math.max(minWidth, calculatedWidth);
     };
     return {
-      height: props.height || getHeight(props, labelSize, orientation) + (padding / 2),
+      height: props.height || getHeight(props, labelSize, orientation) + padding / 2,
       width: props.width || getWidth(props, labelSize, orientation) + padding
     };
   }
@@ -301,53 +303,73 @@ export default class VictoryTooltip extends React.Component {
   getLabelProps(props, calculatedValues) {
     const { flyoutCenter, labelStyle, labelSize, dy, dx } = calculatedValues;
     const { text, datum, labelComponent, index } = props;
-    const textAnchor = (Array.isArray(labelStyle) && labelStyle.length ?
-      labelStyle[0].textAnchor :
-      labelStyle.textAnchor) || "middle";
+    const textAnchor =
+      (Array.isArray(labelStyle) && labelStyle.length
+        ? labelStyle[0].textAnchor
+        : labelStyle.textAnchor) || "middle";
     const getLabelX = () => {
       const sign = textAnchor === "end" ? -1 : 1;
       return flyoutCenter.x - sign * (labelSize.width / 2);
     };
-    return defaults(
-      {},
-      labelComponent.props,
-      {
-        key: `${this.id}-label-${index}`,
-        text, datum, textAnchor, dy, dx,
-        style: labelStyle,
-        x: !textAnchor || textAnchor === "middle" ?
-          flyoutCenter.x : getLabelX(),
-        y: flyoutCenter.y,
-        verticalAnchor: "middle",
-        angle: labelStyle.angle
-      }
-    );
+    return defaults({}, labelComponent.props, {
+      key: `${this.id}-label-${index}`,
+      text,
+      datum,
+      textAnchor,
+      dy,
+      dx,
+      style: labelStyle,
+      x: !textAnchor || textAnchor === "middle" ? flyoutCenter.x : getLabelX(),
+      y: flyoutCenter.y,
+      verticalAnchor: "middle",
+      angle: labelStyle.angle
+    });
   }
 
   getFlyoutProps(props, calculatedValues) {
     const { flyoutDimensions, flyoutStyle } = calculatedValues;
     const {
-      x, y, dx, dy, datum, index, orientation, pointerLength, pointerWidth,
-      cornerRadius, events, flyoutComponent
+      x,
+      y,
+      dx,
+      dy,
+      datum,
+      index,
+      orientation,
+      pointerLength,
+      pointerWidth,
+      cornerRadius,
+      events,
+      flyoutComponent
     } = props;
-    return defaults(
-      {},
-      flyoutComponent.props,
-      {
-        x, y, dx, dy, datum, index, orientation, pointerLength, pointerWidth, cornerRadius, events,
-        key: `${this.id}-tooltip-${index}`,
-        width: flyoutDimensions.width,
-        height: flyoutDimensions.height,
-        style: flyoutStyle
-      }
-    );
+    return defaults({}, flyoutComponent.props, {
+      x,
+      y,
+      dx,
+      dy,
+      datum,
+      index,
+      orientation,
+      pointerLength,
+      pointerWidth,
+      cornerRadius,
+      events,
+      key: `${this.id}-tooltip-${index}`,
+      width: flyoutDimensions.width,
+      height: flyoutDimensions.height,
+      style: flyoutStyle
+    });
   }
 
   // Overridden in victory-core-native
   renderTooltip(props) {
     const evaluatedProps = this.getEvaluatedProps(props);
     const {
-      flyoutComponent, labelComponent, groupComponent, active, renderInPortal
+      flyoutComponent,
+      labelComponent,
+      groupComponent,
+      active,
+      renderInPortal
     } = evaluatedProps;
     if (!active) {
       return renderInPortal ? <VictoryPortal>{null}</VictoryPortal> : null;
@@ -366,7 +388,7 @@ export default class VictoryTooltip extends React.Component {
   }
 
   render() {
-    const props = Helpers.modifyProps((this.props), fallbackProps, "tooltip");
+    const props = Helpers.modifyProps(this.props, fallbackProps, "tooltip");
     return this.renderTooltip(props);
   }
 }