@vx/tooltip - npm Package Compare versions

Comparing version 0.0.160 to 0.0.161

build/enhancers/withTooltip.js

@@ -41,2 +41,10 @@ 'use strict';
 function withTooltip(BaseComponent) {
+  var containerProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    style: {
+      position: 'relative',
+      width: 'inherit',
+      height: 'inherit'
+    }
+  };
+
   var WrappedComponent = function (_React$PureComponent) {
@@ -108,3 +116,3 @@ _inherits(WrappedComponent, _React$PureComponent);
           'div',
-          { style: { position: 'relative' } },
+          containerProps,
           _react2.default.createElement(BaseComponent, _extends({
@@ -111,0 +119,0 @@ updateTooltip: this.updateTooltip,

build/tooltips/TooltipWithBounds.js

@@ -59,3 +59,5 @@ 'use strict';
     _Tooltip2.default,
-    _extends({ style: _extends({ top: 0, transform: 'translate(' + left + 'px, ' + top + 'px)' }, style) }, otherProps),
+    _extends({
+      style: _extends({ top: 0, transform: 'translate(' + left + 'px, ' + top + 'px)' }, style)
+    }, otherProps),
     children
@@ -62,0 +64,0 @@ );

package.json

 {
   "name": "@vx/tooltip",
-  "version": "0.0.160",
+  "version": "0.0.161",
   "description": "vx tooltip",
@@ -30,3 +30,3 @@ "sideEffects": false,
   "dependencies": {
-    "@vx/bounds": "0.0.153",
+    "@vx/bounds": "0.0.161",
     "classnames": "^2.2.5",
@@ -33,0 +33,0 @@ "prop-types": "^15.5.10"

Readme.md

@@ -5,2 +5,104 @@ # @vx/tooltip
 npm install --save @vx/tooltip
-```
+```
+
+The `@vx/tooltip` package provides utilities for making it easy to add `Tooltip`s to a visualization and includes higher-order component (HOC) enhancers and Tooltip components.
+
+### Example:
+``` js
+import { withTooltip, TooltipWithBounds } from '@vx/tooltip';
+import { localPoint } from '@vx/event';
+
+class Chart extends React.Component {
+  handleMouseOver = (event, datum) => {
+    const coords = localPoint(event.target.ownerSVGElement, event);
+    this.props.showTooltip({
+      tooltipLeft: coords.x,
+      tooltipTop: coords.y,
+      tooltipData: datum
+    });
+  };
+
+  render() {
+    const {
+      tooltipData,
+      tooltipLeft,
+      tooltipTop,
+      tooltipOpen,
+      hideTooltip
+    } = this.props;
+
+    return (
+      // note React.Frament is only available in >= react@16.2
+      <React.Fragment>
+        <svg width={...} height={...}>
+          // Chart here...
+          <SomeChartElement onMouseOver={this.handleMouseOver} onMouseOut={hideTooltip} />
+        </svg>
+
+        {tooltipOpen && (
+          <TooltipWithBounds
+            // set this to random so it correctly updates with parent bounds
+            key={Math.random()}
+            top={tooltipTop}
+            left={tooltipLeft}
+          >
+            Data value <strong>{tooltipData}</strong>
+          </TooltipWithBounds>
+        )}
+      </React.Fragment>
+    );
+  }
+}
+
+const ChartWithTooltip = withTooltip(Chart);
+
+render(<ChartWithTooltip />, document.getElementById("root"));
+```
+
+Example codesandbox [here](https://codesandbox.io/s/kw02m019mr).
+
+### Enhancers
+#### withTooltip(BaseComponent [, containerProps])
+If you would like to add tooltip state logic to your component, you may wrap it in `withTooltip(BaseComponent [, containerProps])`.
+The HOC will wrap your component in a `div` with `relative` positioning by default and handle state for tooltip positioning, visibility, and content by injecting the following props into your `BaseComponent`:
+
+
+You may override the container by specifying `containerProps` as the second argument to `withTooltip`.
+
+| Name | Type | Description |
+|:---- |:---- |:----------- |
+| showTooltip | func | Call this function with the signature `func({ tooltipData, tooltipLeft, tooltipTop })` to set the tooltip state to the specified values.
+| hideTooltip | func | Call this function to close a tooltip, i.e., set the `showTooltip` state to `false`.
+| tooltipOpen | bool | Whether the tooltip state is open or closed |
+| tooltipLeft | number | The `tooltipLeft` position passed to the `showTooltip` func, intended to be used for tooltip positioning |
+| tooltipTop | number | The `tooltipTop` position passed to the `showTooltip` func, intended to be used for tooltip positioning |
+| tooltipData | any | The `tooltipData` value passed to the `showTooltip` func, intended to be used for any data that your tooltip might need to render |
+| updateTooltip | func | Call this function with the signature `func({ tooltipOpen, tooltipLeft, tooltipTop, tooltipData })` to set the tooltip state to the specified values. |
+
+
+### Components
+#### <Tooltip />
+This is a simple Tooltip container component meant to be used to actually render a Tooltip. It accepts the following props, and will spread any additional props on the tooltip container div (i.e., ...restProps):
+
+| Name | Type | Default | Description |
+|:---- |:---- |:------- |:----------- |
+| left | number or string | -- | Sets style.left of the tooltip container
+| top | number or string | -- | Sets style.top of the tooltip container
+| className | string | -- | Adds a class (in addition to `vx-tooltip-portal`) to the tooltip container
+| style | object | -- | Sets / overrides any styles on the tooltip container (including top and left)
+| children | node | -- | Sets the children of the tooltip, i.e., the actual content
+
+
+#### TooltipWithBounds
+This tooltip component is exactly the same as `Tooltip` above, but it is aware of its boundaries meaning that it will flip left/right and bottom/top based on whether it would overflow its parent's boundaries. It accepts the following props, and will spread any additional props on the Tooltip component (i.e., ...restProps):
+
+| Name | Type | Default | Description |
+|:---- |:---- |:------- |:----------- |
+| left | number | -- | The horizontal position of the cursor, tooltip will be place to the left or right of this coordinate depending on the width of the tooltip and the size of the parent container.
+| top | number | -- | The vertical position of the cursor, tooltip will be place to the bottom or top of this coordinate depending on the height of the tooltip and the size of the parent container.
+| offsetLeft | number | 10 | Horizontal offset of the tooltip from the passed `left` value, functions as a horizontal padding.
+| offsetRight | number | 10 | Vertical offset of the tooltip from the passed `top` value, functions as a vertical padding.
+| style | object | -- | Sets / overrides any styles on the tooltip container (including top and left)
+| children | node | -- | Sets the children of the tooltip, i.e., the actual content
+
+Note that this component is positioned using a `tranform`, so overriding `left` and `top` via styles may have no effect.

src/enhancers/withTooltip.js

@@ -11,6 +11,15 @@ import React from 'react';
   showTooltip: PropTypes.func,
-  hideTooltip: PropTypes.func,
+  hideTooltip: PropTypes.func
 };
 
-export default function withTooltip(BaseComponent) {
+export default function withTooltip(
+  BaseComponent,
+  containerProps = {
+    style: {
+      position: 'relative',
+      width: 'inherit',
+      height: 'inherit'
+    }
+  }
+) {
   class WrappedComponent extends React.PureComponent {
@@ -56,3 +65,3 @@ constructor(props) {
       return (
-        <div style={{ position: 'relative' }}>
+        <div {...containerProps}>
           <BaseComponent
@@ -59,0 +68,0 @@ updateTooltip={this.updateTooltip}

src/tooltips/Tooltip.js

@@ -35,3 +35,3 @@ import React from 'react';
   style: PropTypes.object,
-  children: PropTypes.any,
+  children: PropTypes.any
 };

src/tooltips/TooltipWithBounds.js

@@ -12,3 +12,3 @@ /* eslint react/forbid-prop-types: 0 */
   offsetLeft: PropTypes.number,
-  offsetTop: PropTypes.number,
+  offsetTop: PropTypes.number
 };
@@ -27,3 +27,3 @@
   style,
-  ...otherProps,
+  ...otherProps
 }) {
@@ -34,11 +34,18 @@ let left = initialLeft;
   if (rect && parentRect) {
-    left = ((offsetLeft + rect.right) > parentRect.right || (offsetLeft + rect.right) > window.innerWidth)
-      ? (left - rect.width - offsetLeft) : left + offsetLeft;
+    left =
+      offsetLeft + rect.right > parentRect.right || offsetLeft + rect.right > window.innerWidth
+        ? left - rect.width - offsetLeft
+        : left + offsetLeft;
 
-    top = ((offsetTop + rect.bottom) > parentRect.bottom || (offsetTop + rect.bottom) > window.innerHeight)
-      ? (top - rect.height - offsetTop) : top + offsetTop;
+    top =
+      offsetTop + rect.bottom > parentRect.bottom || offsetTop + rect.bottom > window.innerHeight
+        ? top - rect.height - offsetTop
+        : top + offsetTop;
   }
 
   return (
-    <Tooltip style={{ top: 0, transform: `translate(${left}px, ${top}px)`, ...style }} {...otherProps}>
+    <Tooltip
+      style={{ top: 0, transform: `translate(${left}px, ${top}px)`, ...style }}
+      {...otherProps}
+    >
       {children}
@@ -45,0 +52,0 @@ </Tooltip>

test/enzyme-setup.js

 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
-Enzyme.configure({ adapter: new Adapter() });
+Enzyme.configure({ adapter: new Adapter() });

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

22533

increased by32.38%

Lines of code

407

increased by6.82%

Number of lines in readme file

108

increased by2060%

Dependency changes

• + Added@vx/bounds@0.0.161(transitive)

• - Removed@vx/bounds@0.0.153(transitive)

• Updated@vx/bounds@0.0.161