Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

victory-tooltip

Package Overview
Dependencies
Maintainers
2
Versions
149
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

victory-tooltip - npm Package Compare versions

Comparing version 31.0.2 to 31.1.0

8

es/victory-tooltip.js

@@ -82,10 +82,8 @@ import _uniqueId from "lodash/uniqueId";

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";

@@ -92,0 +90,0 @@ } else {

@@ -98,10 +98,8 @@ "use strict";

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";

@@ -108,0 +106,0 @@ } else {

{
"name": "victory-tooltip",
"version": "31.0.2",
"version": "31.1.0",
"description": "Tooltip 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": {

@@ -23,3 +23,3 @@ # VictoryTooltip

*default:* `activateData={false}`
_default:_ `activateData={false}`

@@ -69,3 +69,3 @@ ### angle

*examples:* `events={{onClick: (evt) => alert("x: " + evt.clientX)}}`
_examples:_ `events={{onClick: (evt) => alert("x: " + evt.clientX)}}`

@@ -84,7 +84,6 @@ ### flyoutStyle

*examples:* `flyoutComponent={<Flyout x={50} y={50}/>}`, `flyoutComponent={<MyCustomFlyout/>}`
_examples:_ `flyoutComponent={<Flyout x={50} y={50}/>}`, `flyoutComponent={<MyCustomFlyout/>}`
_default:_ `<Flyout/>`
*default:* `<Flyout/>`
### groupComponent

@@ -96,3 +95,3 @@

*default:* `groupComponent={<g/>}`
_default:_ `groupComponent={<g/>}`

@@ -123,5 +122,5 @@ ### height

*examples:* `labelComponent={<VictoryLabel dy={20}/>}`, `labelComponent={<MyCustomLabel/>}`
_examples:_ `labelComponent={<VictoryLabel dy={20}/>}`, `labelComponent={<MyCustomLabel/>}`
*default:* `<VictoryLabel/>`
_default:_ `<VictoryLabel/>`

@@ -182,7 +181,7 @@ ### orientation

[Flyout]: https://formidable.com/open-source/victory/docs/victory-primitives#flyout
[VictoryLabel]: https://formidable.com/open-source/victory/docs/victory-label
[VictoryPortal]: https://formidable.com/open-source/victory/docs/victory-portal
[VictoryContainer]: https://formidable.com/open-source/victory/docs/victory-container
[Portal]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-portal/portal.js
[flyout]: https://formidable.com/open-source/victory/docs/victory-primitives#flyout
[victorylabel]: https://formidable.com/open-source/victory/docs/victory-label
[victoryportal]: https://formidable.com/open-source/victory/docs/victory-portal
[victorycontainer]: https://formidable.com/open-source/victory/docs/victory-container
[portal]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-portal/portal.js
[approximate text size]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-util/textsize.js

@@ -7,3 +7,2 @@ /*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2] }]*/

export default class Flyout extends React.Component {
static propTypes = {

@@ -26,3 +25,3 @@ ...CommonProps.primitiveProps,

static defaultProps = {
pathComponent: <Path/>
pathComponent: <Path />
};

@@ -35,6 +34,6 @@

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";

@@ -62,3 +61,3 @@ const arc = `${cornerRadius} ${cornerRadius} ${direction}`;

const pointerEdge = x + sign * pointerLength;
const oppositeEdge = x + (sign * pointerLength) + (sign * width);
const oppositeEdge = x + sign * pointerLength + sign * width;
const bottomEdge = y + height / 2;

@@ -84,4 +83,5 @@ const topEdge = y - height / 2;

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);
}

@@ -91,11 +91,25 @@

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
});
}
}
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

@@ -21,21 +26,9 @@ } from "victory-core";

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,

@@ -45,6 +38,3 @@ flyoutComponent: PropTypes.element,

groupComponent: PropTypes.element,
height: PropTypes.oneOfType([
CustomPropTypes.nonNegative,
PropTypes.func
]),
height: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
horizontal: PropTypes.bool,

@@ -58,16 +48,7 @@ id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

]),
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([

@@ -80,6 +61,3 @@ PropTypes.string,

theme: PropTypes.object,
width: PropTypes.oneOfType([
CustomPropTypes.nonNegative,
PropTypes.func
]),
width: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
x: PropTypes.number,

@@ -92,45 +70,47 @@ y: PropTypes.number

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 }) }];
}
}
}
}];
];
};

@@ -140,4 +120,3 @@

super(props);
this.id = props.id === undefined ?
uniqueId("tooltip-") : props.id;
this.id = props.id === undefined ? uniqueId("tooltip-") : props.id;
}

@@ -169,7 +148,10 @@

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";

@@ -183,33 +165,38 @@ } else {

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)
});
}

@@ -220,14 +207,15 @@

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);

@@ -237,3 +225,10 @@ const flyoutDimensions = this.getDimensions(props, labelSize, labelStyle);

const transform = this.getTransform(props);
return { labelStyle, flyoutStyle, labelSize, flyoutDimensions, flyoutCenter, transform };
return {
labelStyle,
flyoutStyle,
labelSize,
flyoutDimensions,
flyoutCenter,
transform
};
}

@@ -246,3 +241,2 @@

return angle ? `rotate(${angle} ${x} ${y})` : undefined;
}

@@ -257,3 +251,3 @@

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;

@@ -277,6 +271,10 @@ let angle;

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
};

@@ -298,4 +296,6 @@ }

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);

@@ -305,8 +305,10 @@ };

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

@@ -319,5 +321,6 @@ };

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 = () => {

@@ -327,16 +330,15 @@ const sign = textAnchor === "end" ? -1 : 1;

};
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
});
}

@@ -347,16 +349,32 @@

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
});
}

@@ -368,3 +386,7 @@

const {
flyoutComponent, labelComponent, groupComponent, active, renderInPortal
flyoutComponent,
labelComponent,
groupComponent,
active,
renderInPortal
} = evaluatedProps;

@@ -388,5 +410,5 @@ if (!active) {

render() {
const props = Helpers.modifyProps((this.props), fallbackProps, "tooltip");
const props = Helpers.modifyProps(this.props, fallbackProps, "tooltip");
return this.renderTooltip(props);
}
}

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc