react-vis - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

dist/lib/plot/hint.js

@@ -47,9 +47,42 @@ 'use strict';
 
-var ORIENTATION_AUTO = 'auto';
-var ORIENTATION_TOPLEFT = 'topleft';
-var ORIENTATION_BOTTOMLEFT = 'bottomleft';
-var ORIENTATION_TOPRIGHT = 'topright';
-var ORIENTATION_BOTTOMRIGHT = 'bottomright';
+/*
+ * Hint provides two options for placement of hint:
+ * a) around a data point in one of four quadrants (imagine the point bisected
+ *    by two axes -vertical, horizontal- creating 4 quadrants around a data
+ *    point).
+ * b) **New** pin to an edge of chart/plot area and position along that edge
+ *    using data point's other dimension value.
+ *
+ * To support these two options, deprecate one Hint props (orientation) with two
+ * new Hint align prop object (horizontal, vertical) with following values:
+ *
+ *   horizontal: auto, left, right, leftEdge, rightEdge
+ *   vertical: auto, bottom, top, bottomEdge, topEdge
+ *
+ * Thus, the following ALIGN constants are the values for horizontal
+ * and vertical
+ */
+var ALIGN = {
+  AUTO: 'auto',
+  LEFT: 'left',
+  RIGHT: 'right',
+  LEFT_EDGE: 'leftEdge',
+  RIGHT_EDGE: 'rightEdge',
+  BOTTOM: 'bottom',
+  TOP: 'top',
+  BOTTOM_EDGE: 'bottomEdge',
+  TOP_EDGE: 'topEdge'
+};
 
 /**
+ * For backwards support, retain the ORIENTATION prop constants
+ */
+var ORIENTATION = {
+  BOTTOM_LEFT: 'bottomleft',
+  BOTTOM_RIGHT: 'bottomright',
+  TOP_LEFT: 'topleft',
+  TOP_RIGHT: 'topright'
+};
+
+/**
  * Default format function for the value.
@@ -80,2 +113,3 @@ * @param {Object} value Value.
      * Get the right coordinate of the hint.
+     * When x undefined or null, edge case, pin right.
      * @param {number} x X.
@@ -86,2 +120,8 @@ * @returns {{right: *}} Mixin.
     value: function _getCSSRight(x) {
+      if (x === undefined || x === null) {
+        return {
+          right: 0
+        };
+      }
+
       var _props = this.props,
@@ -92,3 +132,3 @@ innerWidth = _props.innerWidth,
       return {
-        right: marginRight + innerWidth - x + 'px'
+        right: marginRight + innerWidth - x
       };
@@ -99,2 +139,3 @@ }
      * Get the left coordinate of the hint.
+     * When x undefined or null, edge case, pin left.
      * @param {number} x X.
@@ -108,6 +149,12 @@ * @returns {{left: *}} Mixin.
     value: function _getCSSLeft(x) {
+      if (x === undefined || x === null) {
+        return {
+          left: 0
+        };
+      }
+
       var marginLeft = this.props.marginLeft;
 
       return {
-        left: marginLeft + x + 'px'
+        left: marginLeft + x
       };
@@ -118,2 +165,3 @@ }
      * Get the bottom coordinate of the hint.
+     * When y undefined or null, edge case, pin bottom.
      * @param {number} y Y.
@@ -127,2 +175,8 @@ * @returns {{bottom: *}} Mixin.
     value: function _getCSSBottom(y) {
+      if (y === undefined || y === null) {
+        return {
+          bottom: 0
+        };
+      }
+
       var _props2 = this.props,
@@ -133,3 +187,3 @@ innerHeight = _props2.innerHeight,
       return {
-        bottom: marginBottom + innerHeight - y + 'px'
+        bottom: marginBottom + innerHeight - y
       };
@@ -140,2 +194,3 @@ }
      * Get the top coordinate of the hint.
+     * When y undefined or null, edge case, pin top.
      * @param {number} y Y.
@@ -149,15 +204,54 @@ * @returns {{top: *}} Mixin.
     value: function _getCSSTop(y) {
+      if (y === undefined || y === null) {
+        return {
+          top: 0
+        };
+      }
+
       var marginTop = this.props.marginTop;
 
       return {
-        top: marginTop + y + 'px'
+        top: marginTop + y
       };
     }
+  }, {
+    key: '_mapOrientationToAlign',
+    value: function _mapOrientationToAlign(orientation) {
+      // TODO: print warning that this feature is deprecated and support will be
+      // removed in next major release.
+      switch (orientation) {
+        case ORIENTATION.BOTTOM_LEFT:
+          return {
+            horizontal: ALIGN.LEFT,
+            vertical: ALIGN.BOTTOM
+          };
+        case ORIENTATION.BOTTOM_RIGHT:
+          return {
+            horizontal: ALIGN.RIGHT,
+            vertical: ALIGN.BOTTOM
+          };
+        case ORIENTATION.TOP_LEFT:
+          return {
+            horizontal: ALIGN.LEFT,
+            vertical: ALIGN.TOP
+          };
+        case ALIGN.TOP_RIGHT:
+          return {
+            horizontal: ALIGN.RIGHT,
+            vertical: ALIGN.TOP
+          };
+        default:
+          // fall back to horizontalAlign, verticalAlign that are either
+          // provided or defaulted to AUTO.  So, don't change things
+          break;
+      }
+    }
 
     /**
-     * Convert the "automatic" orientation to the real one depending on the values
-     * of x and y.
+     * Obtain align object with horizontal and vertical settings
+     * but convert any AUTO values to the non-auto ALIGN depending on the
+     * values of x and y.
      * @param {number} x X value.
      * @param {number} y Y value.
-     * @returns {string} Orientation.
+     * @returns {Object} Align object w/ horizontal, vertical prop strings.
      * @private
@@ -167,18 +261,20 @@ */
   }, {
-    key: '_getOrientationFromAuto',
-    value: function _getOrientationFromAuto(x, y) {
+    key: '_getAlign',
+    value: function _getAlign(x, y) {
       var _props3 = this.props,
           innerWidth = _props3.innerWidth,
-          innerHeight = _props3.innerHeight;
+          innerHeight = _props3.innerHeight,
+          orientation = _props3.orientation,
+          _props3$align = _props3.align,
+          horizontal = _props3$align.horizontal,
+          vertical = _props3$align.vertical;
 
-      if (x > innerWidth / 2) {
-        if (y > innerHeight / 2) {
-          return ORIENTATION_TOPLEFT;
-        }
-        return ORIENTATION_BOTTOMLEFT;
+      var align = orientation ? this._mapOrientationToAlign(orientation) : { horizontal: horizontal, vertical: vertical };
+      if (horizontal === ALIGN.AUTO) {
+        align.horizontal = x > innerWidth / 2 ? ALIGN.LEFT : ALIGN.RIGHT;
       }
-      if (y > innerHeight / 2) {
-        return ORIENTATION_TOPRIGHT;
+      if (vertical === ALIGN.AUTO) {
+        align.vertical = y > innerHeight / 2 ? ALIGN.TOP : ALIGN.BOTTOM;
       }
-      return ORIENTATION_BOTTOMRIGHT;
+      return align;
     }
@@ -188,3 +284,3 @@
      * Get a CSS mixin for a proper positioning of the element.
-     * @param {string} orientation Orientation.
+     * @param {Object} align object with horizontal and vertical prop strings.
      * @param {number} x X position.
@@ -198,25 +294,53 @@ * @param {number} y Y position.
   }, {
-    key: '_getOrientationStyle',
-    value: function _getOrientationStyle(orientation, x, y) {
-      var xCSS = void 0;
-      var yCSS = void 0;
-
-      if (orientation === ORIENTATION_BOTTOMLEFT || orientation === ORIENTATION_BOTTOMRIGHT) {
-        yCSS = this._getCSSTop(y);
-      } else {
-        yCSS = this._getCSSBottom(y);
+    key: '_getAlignStyle',
+    value: function _getAlignStyle(align, x, y) {
+      return _extends({}, this._getXCSS(align.horizontal, x), this._getYCSS(align.vertical, y));
+    }
+  }, {
+    key: '_getYCSS',
+    value: function _getYCSS(verticalAlign, y) {
+      // obtain yCSS
+      switch (verticalAlign) {
+        case ALIGN.TOP_EDGE:
+          // this pins x to top edge
+          return this._getCSSTop(null);
+        case ALIGN.BOTTOM_EDGE:
+          // this pins x to bottom edge
+          return this._getCSSBottom(null);
+        case ALIGN.BOTTOM:
+          // this places hint text to the bottom of center, so set its top edge
+          return this._getCSSTop(y);
+        case ALIGN.TOP:
+        default:
+          // this places hint text to the top of center, so set its bottom edge
+          // default case should not be possible but if it happens set to BOTTOM
+          return this._getCSSBottom(y);
       }
-      if (orientation === ORIENTATION_TOPLEFT || orientation === ORIENTATION_BOTTOMLEFT) {
-        xCSS = this._getCSSRight(x);
-      } else {
-        xCSS = this._getCSSLeft(x);
+    }
+  }, {
+    key: '_getXCSS',
+    value: function _getXCSS(horizontal, x) {
+      // obtain xCSS
+      switch (horizontal) {
+        case ALIGN.LEFT_EDGE:
+          // this pins x to left edge
+          return this._getCSSLeft(null);
+        case ALIGN.RIGHT_EDGE:
+          // this pins x to left edge
+          return this._getCSSRight(null);
+        case ALIGN.LEFT:
+          // this places hint text to the left of center, so set its right edge
+          return this._getCSSRight(x);
+        case ALIGN.RIGHT:
+        default:
+          // this places hint text to the right of center, so set its left edge
+          // default case should not be possible but if it happens set to RIGHT
+          return this._getCSSLeft(x);
       }
-
-      return _extends({}, xCSS, yCSS);
     }
 
     /**
-     * Get the class name from orientation value.
-     * @param {string} orientation Orientation.
-     * @returns {string} Class name.
+     * Get the class names from align values.
+     * @param {Object} align object with horizontal and vertical prop strings.
+     * @returns {string} Class names.
      * @private
@@ -226,5 +350,8 @@ */
   }, {
-    key: '_getOrientationClassName',
-    value: function _getOrientationClassName(orientation) {
-      return 'rv-hint--orientation-' + orientation;
+    key: '_getAlignClassNames',
+    value: function _getAlignClassNames(align) {
+      var orientation = this.props.orientation;
+
+      var orientationClass = orientation ? 'rv-hint--orientation-' + orientation : '';
+      return orientationClass + ' rv-hint--horizontalAlign-' + align.horizontal + '\n     rv-hint--verticalAlign-' + align.vertical;
     }
@@ -244,3 +371,3 @@
           value = _props4.value,
-          initialOrientation = _props4.orientation;
+          getAlignStyle = _props4.getAlignStyle;
 
@@ -251,7 +378,7 @@
 
-      var orientation = initialOrientation === ORIENTATION_AUTO ? this._getOrientationFromAuto(x, y) : initialOrientation;
+      var align = this._getAlign(x, y);
 
       return {
-        style: this._getOrientationStyle(orientation, x, y),
-        className: this._getOrientationClassName(orientation)
+        style: getAlignStyle ? getAlignStyle(align, x, y) : this._getAlignStyle(align, x, y),
+        className: this._getAlignClassNames(align)
       };
@@ -312,3 +439,8 @@ }
         format: _react2.default.PropTypes.func,
-        orientation: _react2.default.PropTypes.oneOf([ORIENTATION_AUTO, ORIENTATION_BOTTOMLEFT, ORIENTATION_BOTTOMRIGHT, ORIENTATION_TOPLEFT, ORIENTATION_TOPRIGHT])
+        align: _react2.default.PropTypes.shape({
+          horizontal: _react2.default.PropTypes.oneOf([ALIGN.AUTO, ALIGN.LEFT, ALIGN.RIGHT, ALIGN.LEFT_EDGE, ALIGN.RIGHT_EDGE]),
+          vertical: _react2.default.PropTypes.oneOf([ALIGN.AUTO, ALIGN.BOTTOM, ALIGN.TOP, ALIGN.BOTTOM_EDGE, ALIGN.TOP_EDGE])
+        }),
+        getAlignStyle: _react2.default.PropTypes.func,
+        orientation: _react2.default.PropTypes.oneOf([ORIENTATION.BOTTOM_LEFT, ORIENTATION.BOTTOM_RIGHT, ORIENTATION.TOP_LEFT, ORIENTATION.TOP_RIGHT])
       };
@@ -321,3 +453,6 @@ }
         format: defaultFormat,
-        orientation: ORIENTATION_AUTO
+        align: {
+          horizontal: ALIGN.AUTO,
+          vertical: ALIGN.AUTO
+        }
       };
@@ -331,3 +466,5 @@ }
 Hint.displayName = 'Hint';
+Hint.ORIENTATION = ORIENTATION;
+Hint.ALIGN = ALIGN;
 
 exports.default = Hint;

package.json

 {
   "name": "react-vis",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Anton Bulyenov <[e-mail]>",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3403790

increased by596.4%

Number of package files

70

increased by7.69%

Lines of code

41536

increased by573.41%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes