Socket
Socket
Sign inDemoInstall

@nivo/tooltip

Package Overview
Dependencies
Maintainers
2
Versions
38
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nivo/tooltip - npm Package Compare versions

Comparing version 0.74.1 to 0.75.0

585

dist/nivo-tooltip.cjs.js

@@ -1,585 +0,2 @@

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var react = require('react');
var web = require('@react-spring/web');
var core = require('@nivo/core');
var jsxRuntime = require('react/jsx-runtime');
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
}
return arr2;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
var TOOLTIP_OFFSET = 14;
var tooltipStyle = {
pointerEvents: 'none',
position: 'absolute',
zIndex: 10,
top: 0,
left: 0
};
var translate = function translate(x, y) {
return "translate(".concat(x, "px, ").concat(y, "px)");
};
var TooltipWrapper = react.memo(function (_ref) {
var _animatedProps$transf;
var position = _ref.position,
anchor = _ref.anchor,
children = _ref.children;
var theme = core.useTheme();
var _useMotionConfig = core.useMotionConfig(),
animate = _useMotionConfig.animate,
springConfig = _useMotionConfig.config;
var _useMeasure = core.useMeasure(),
_useMeasure2 = _slicedToArray(_useMeasure, 2),
measureRef = _useMeasure2[0],
bounds = _useMeasure2[1];
var previousPosition = react.useRef(false);
var to = undefined;
var immediate = false;
var hasDimension = bounds.width > 0 && bounds.height > 0;
var x = Math.round(position[0]);
var y = Math.round(position[1]);
if (hasDimension) {
if (anchor === 'top') {
x -= bounds.width / 2;
y -= bounds.height + TOOLTIP_OFFSET;
} else if (anchor === 'right') {
x += TOOLTIP_OFFSET;
y -= bounds.height / 2;
} else if (anchor === 'bottom') {
x -= bounds.width / 2;
y += TOOLTIP_OFFSET;
} else if (anchor === 'left') {
x -= bounds.width + TOOLTIP_OFFSET;
y -= bounds.height / 2;
} else if (anchor === 'center') {
x -= bounds.width / 2;
y -= bounds.height / 2;
}
to = {
transform: translate(x, y)
};
if (!previousPosition.current) {
immediate = true;
}
previousPosition.current = [x, y];
}
var animatedProps = web.useSpring({
to: to,
config: springConfig,
immediate: !animate || immediate
});
var style = _objectSpread2(_objectSpread2(_objectSpread2({}, tooltipStyle), theme.tooltip), {}, {
transform: (_animatedProps$transf = animatedProps.transform) !== null && _animatedProps$transf !== void 0 ? _animatedProps$transf : translate(x, y)
});
return jsxRuntime.jsx(web.animated.div, {
ref: measureRef,
style: style,
children: children
});
});
TooltipWrapper.displayName = 'TooltipWrapper';
var Chip = react.memo(function (_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 12 : _ref$size,
color = _ref.color,
_ref$style = _ref.style,
style = _ref$style === void 0 ? {} : _ref$style;
return jsxRuntime.jsx("span", {
style: _objectSpread2({
display: 'block',
width: size,
height: size,
background: color
}, style)
});
});
var BasicTooltip = react.memo(function (_ref) {
var id = _ref.id,
_value = _ref.value,
format = _ref.format,
_ref$enableChip = _ref.enableChip,
enableChip = _ref$enableChip === void 0 ? false : _ref$enableChip,
color = _ref.color,
renderContent = _ref.renderContent;
var theme = core.useTheme();
var formatValue = core.useValueFormatter(format);
var content;
if (typeof renderContent === 'function') {
content = renderContent();
} else {
var value = _value;
if (formatValue !== undefined && value !== undefined) {
value = formatValue(value);
}
content = jsxRuntime.jsxs("div", {
style: theme.tooltip.basic,
children: [enableChip && jsxRuntime.jsx(Chip, {
color: color,
style: theme.tooltip.chip
}), value !== undefined ? jsxRuntime.jsxs("span", {
children: [id, ": ", jsxRuntime.jsx("strong", {
children: "".concat(value)
})]
}) : id]
});
}
return jsxRuntime.jsx("div", {
style: theme.tooltip.container,
children: content
});
});
var tableStyle = {
width: '100%',
borderCollapse: 'collapse'
};
var TableTooltip = react.memo(function (_ref) {
var title = _ref.title,
_ref$rows = _ref.rows,
rows = _ref$rows === void 0 ? [] : _ref$rows,
renderContent = _ref.renderContent;
var theme = core.useTheme();
if (!rows.length) return null;
var content;
if (typeof renderContent === 'function') {
content = renderContent();
} else {
content = jsxRuntime.jsxs("div", {
children: [title && title, jsxRuntime.jsx("table", {
style: _objectSpread2(_objectSpread2({}, tableStyle), theme.tooltip.table),
children: jsxRuntime.jsx("tbody", {
children: rows.map(function (row, i) {
return jsxRuntime.jsx("tr", {
children: row.map(function (column, j) {
return jsxRuntime.jsx("td", {
style: theme.tooltip.tableCell,
children: column
}, j);
})
}, i);
})
})
})]
});
}
return jsxRuntime.jsx("div", {
style: theme.tooltip.container,
children: content
});
});
TableTooltip.displayName = 'TableTooltip';
var CrosshairLine = react.memo(function (_ref) {
var x0 = _ref.x0,
x1 = _ref.x1,
y0 = _ref.y0,
y1 = _ref.y1;
var theme = core.useTheme();
var _useMotionConfig = core.useMotionConfig(),
animate = _useMotionConfig.animate,
springConfig = _useMotionConfig.config;
var style = react.useMemo(function () {
return _objectSpread2(_objectSpread2({}, theme.crosshair.line), {}, {
pointerEvents: 'none'
});
}, [theme.crosshair.line]);
var animatedProps = web.useSpring({
x1: x0,
x2: x1,
y1: y0,
y2: y1,
config: springConfig,
immediate: !animate
});
return jsxRuntime.jsx(web.animated.line, _objectSpread2(_objectSpread2({}, animatedProps), {}, {
fill: "none",
style: style
}));
});
CrosshairLine.displayName = 'CrosshairLine';
var Crosshair = react.memo(function (_ref) {
var width = _ref.width,
height = _ref.height,
type = _ref.type,
x = _ref.x,
y = _ref.y;
var xLine;
var yLine;
if (type === 'cross') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: height
};
yLine = {
x0: 0,
x1: width,
y0: y,
y1: y
};
} else if (type === 'top-left') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: y
};
yLine = {
x0: 0,
x1: x,
y0: y,
y1: y
};
} else if (type === 'top') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: y
};
} else if (type === 'top-right') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: y
};
yLine = {
x0: x,
x1: width,
y0: y,
y1: y
};
} else if (type === 'right') {
yLine = {
x0: x,
x1: width,
y0: y,
y1: y
};
} else if (type === 'bottom-right') {
xLine = {
x0: x,
x1: x,
y0: y,
y1: height
};
yLine = {
x0: x,
x1: width,
y0: y,
y1: y
};
} else if (type === 'bottom') {
xLine = {
x0: x,
x1: x,
y0: y,
y1: height
};
} else if (type === 'bottom-left') {
xLine = {
x0: x,
x1: x,
y0: y,
y1: height
};
yLine = {
x0: 0,
x1: x,
y0: y,
y1: y
};
} else if (type === 'left') {
yLine = {
x0: 0,
x1: x,
y0: y,
y1: y
};
} else if (type === 'x') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: height
};
} else if (type === 'y') {
yLine = {
x0: 0,
x1: width,
y0: y,
y1: y
};
}
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [xLine && jsxRuntime.jsx(CrosshairLine, {
x0: xLine.x0,
x1: xLine.x1,
y0: xLine.y0,
y1: xLine.y1
}), yLine && jsxRuntime.jsx(CrosshairLine, {
x0: yLine.x0,
x1: yLine.x1,
y0: yLine.y0,
y1: yLine.y1
})]
});
});
Crosshair.displayName = 'Crosshair';
var defaultActions = {
showTooltipAt: function showTooltipAt() {},
showTooltipFromEvent: function showTooltipFromEvent() {},
hideTooltip: function hideTooltip() {}
};
var TooltipActionsContext = react.createContext(defaultActions);
var hiddenTooltipState = {
isVisible: false,
position: [null, null],
content: null,
anchor: null
};
var TooltipStateContext = react.createContext(hiddenTooltipState);
var useTooltipHandlers = function useTooltipHandlers(container) {
var _useState = react.useState(hiddenTooltipState),
_useState2 = _slicedToArray(_useState, 2),
state = _useState2[0],
setState = _useState2[1];
var showTooltipAt = react.useCallback(function (content, _ref) {
var _ref2 = _slicedToArray(_ref, 2),
x = _ref2[0],
y = _ref2[1];
var anchor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top';
setState({
isVisible: true,
position: [x, y],
anchor: anchor,
content: content
});
}, [setState]);
var showTooltipFromEvent = react.useCallback(function (content, event) {
var anchor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top';
var bounds = container.current.getBoundingClientRect();
var x = event.clientX - bounds.left;
var y = event.clientY - bounds.top;
if (anchor === 'left' || anchor === 'right') {
if (x < bounds.width / 2) anchor = 'right';else anchor = 'left';
}
setState({
isVisible: true,
position: [x, y],
anchor: anchor,
content: content
});
}, [container, setState]);
var hideTooltip = react.useCallback(function () {
setState(hiddenTooltipState);
}, [setState]);
var actions = react.useMemo(function () {
return {
showTooltipAt: showTooltipAt,
showTooltipFromEvent: showTooltipFromEvent,
hideTooltip: hideTooltip
};
}, [showTooltipAt, showTooltipFromEvent, hideTooltip]);
return {
actions: actions,
state: state
};
};
var useTooltip = function useTooltip() {
var context = react.useContext(TooltipActionsContext);
if (context === undefined) {
throw new Error('useTooltip must be used within a TooltipProvider');
}
return context;
};
var useTooltipState = function useTooltipState() {
var context = react.useContext(TooltipStateContext);
if (context === undefined) {
throw new Error('useTooltipState must be used within a TooltipProvider');
}
return context;
};
var isVisibleTooltipState = function isVisibleTooltipState(state) {
return state.isVisible;
};
var Tooltip = function Tooltip() {
var state = useTooltipState();
if (!isVisibleTooltipState(state)) {
return null;
}
return jsxRuntime.jsx(TooltipWrapper, {
position: state.position,
anchor: state.anchor,
children: state.content
});
};
var TooltipProvider = function TooltipProvider(_ref) {
var container = _ref.container,
children = _ref.children;
var _useTooltipHandlers = useTooltipHandlers(container),
actions = _useTooltipHandlers.actions,
state = _useTooltipHandlers.state;
return jsxRuntime.jsx(TooltipActionsContext.Provider, {
value: actions,
children: jsxRuntime.jsx(TooltipStateContext.Provider, {
value: state,
children: children
})
});
};
exports.BasicTooltip = BasicTooltip;
exports.Chip = Chip;
exports.Crosshair = Crosshair;
exports.TableTooltip = TableTooltip;
exports.Tooltip = Tooltip;
exports.TooltipActionsContext = TooltipActionsContext;
exports.TooltipProvider = TooltipProvider;
exports.TooltipStateContext = TooltipStateContext;
exports.TooltipWrapper = TooltipWrapper;
exports.hiddenTooltipState = hiddenTooltipState;
exports.isVisibleTooltipState = isVisibleTooltipState;
exports.useTooltip = useTooltip;
exports.useTooltipHandlers = useTooltipHandlers;
exports.useTooltipState = useTooltipState;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("@react-spring/web"),o=require("@nivo/core"),i=require("react/jsx-runtime");function r(){return r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var i in o)Object.prototype.hasOwnProperty.call(o,i)&&(t[i]=o[i])}return t},r.apply(this,arguments)}var n={pointerEvents:"none",position:"absolute",zIndex:10,top:0,left:0},s=function(t,e){return"translate("+t+"px, "+e+"px)"},l=t.memo((function(l){var a,u=l.position,c=l.anchor,p=l.children,x=o.useTheme(),h=o.useMotionConfig(),d=h.animate,y=h.config,f=o.useMeasure(),v=f[0],m=f[1],b=t.useRef(!1),g=void 0,T=!1,j=m.width>0&&m.height>0,w=Math.round(u[0]),C=Math.round(u[1]);j&&("top"===c?(w-=m.width/2,C-=m.height+14):"right"===c?(w+=14,C-=m.height/2):"bottom"===c?(w-=m.width/2,C+=14):"left"===c?(w-=m.width+14,C-=m.height/2):"center"===c&&(w-=m.width/2,C-=m.height/2),g={transform:s(w,C)},b.current||(T=!0),b.current=[w,C]);var M=e.useSpring({to:g,config:y,immediate:!d||T}),S=r({},n,x.tooltip,{transform:null!=(a=M.transform)?a:s(w,C)});return i.jsx(e.animated.div,{ref:v,style:S,children:p})}));l.displayName="TooltipWrapper";var a=t.memo((function(t){var e=t.size,o=void 0===e?12:e,n=t.color,s=t.style,l=void 0===s?{}:s;return i.jsx("span",{style:r({display:"block",width:o,height:o,background:n},l)})})),u=t.memo((function(t){var e,r=t.id,n=t.value,s=t.format,l=t.enableChip,u=void 0!==l&&l,c=t.color,p=t.renderContent,x=o.useTheme(),h=o.useValueFormatter(s);if("function"==typeof p)e=p();else{var d=n;void 0!==h&&void 0!==d&&(d=h(d)),e=i.jsxs("div",{style:x.tooltip.basic,children:[u&&i.jsx(a,{color:c,style:x.tooltip.chip}),void 0!==d?i.jsxs("span",{children:[r,": ",i.jsx("strong",{children:""+d})]}):r]})}return i.jsx("div",{style:x.tooltip.container,children:e})})),c={width:"100%",borderCollapse:"collapse"},p=t.memo((function(t){var e,n=t.title,s=t.rows,l=void 0===s?[]:s,a=t.renderContent,u=o.useTheme();return l.length?(e="function"==typeof a?a():i.jsxs("div",{children:[n&&n,i.jsx("table",{style:r({},c,u.tooltip.table),children:i.jsx("tbody",{children:l.map((function(t,e){return i.jsx("tr",{children:t.map((function(t,e){return i.jsx("td",{style:u.tooltip.tableCell,children:t},e)}))},e)}))})})]}),i.jsx("div",{style:u.tooltip.container,children:e})):null}));p.displayName="TableTooltip";var x=t.memo((function(n){var s=n.x0,l=n.x1,a=n.y0,u=n.y1,c=o.useTheme(),p=o.useMotionConfig(),x=p.animate,h=p.config,d=t.useMemo((function(){return r({},c.crosshair.line,{pointerEvents:"none"})}),[c.crosshair.line]),y=e.useSpring({x1:s,x2:l,y1:a,y2:u,config:h,immediate:!x});return i.jsx(e.animated.line,r({},y,{fill:"none",style:d}))}));x.displayName="CrosshairLine";var h=t.memo((function(t){var e,o,r=t.width,n=t.height,s=t.type,l=t.x,a=t.y;return"cross"===s?(e={x0:l,x1:l,y0:0,y1:n},o={x0:0,x1:r,y0:a,y1:a}):"top-left"===s?(e={x0:l,x1:l,y0:0,y1:a},o={x0:0,x1:l,y0:a,y1:a}):"top"===s?e={x0:l,x1:l,y0:0,y1:a}:"top-right"===s?(e={x0:l,x1:l,y0:0,y1:a},o={x0:l,x1:r,y0:a,y1:a}):"right"===s?o={x0:l,x1:r,y0:a,y1:a}:"bottom-right"===s?(e={x0:l,x1:l,y0:a,y1:n},o={x0:l,x1:r,y0:a,y1:a}):"bottom"===s?e={x0:l,x1:l,y0:a,y1:n}:"bottom-left"===s?(e={x0:l,x1:l,y0:a,y1:n},o={x0:0,x1:l,y0:a,y1:a}):"left"===s?o={x0:0,x1:l,y0:a,y1:a}:"x"===s?e={x0:l,x1:l,y0:0,y1:n}:"y"===s&&(o={x0:0,x1:r,y0:a,y1:a}),i.jsxs(i.Fragment,{children:[e&&i.jsx(x,{x0:e.x0,x1:e.x1,y0:e.y0,y1:e.y1}),o&&i.jsx(x,{x0:o.x0,x1:o.x1,y0:o.y0,y1:o.y1})]})}));h.displayName="Crosshair";var d=t.createContext({showTooltipAt:function(){},showTooltipFromEvent:function(){},hideTooltip:function(){}}),y={isVisible:!1,position:[null,null],content:null,anchor:null},f=t.createContext(y),v=function(e){var o=t.useState(y),i=o[0],r=o[1],n=t.useCallback((function(t,e,o){var i=e[0],n=e[1];void 0===o&&(o="top"),r({isVisible:!0,position:[i,n],anchor:o,content:t})}),[r]),s=t.useCallback((function(t,o,i){void 0===i&&(i="top");var n=e.current.getBoundingClientRect(),s=o.clientX-n.left,l=o.clientY-n.top;"left"!==i&&"right"!==i||(i=s<n.width/2?"right":"left"),r({isVisible:!0,position:[s,l],anchor:i,content:t})}),[e,r]),l=t.useCallback((function(){r(y)}),[r]);return{actions:t.useMemo((function(){return{showTooltipAt:n,showTooltipFromEvent:s,hideTooltip:l}}),[n,s,l]),state:i}},m=function(){var e=t.useContext(f);if(void 0===e)throw new Error("useTooltipState must be used within a TooltipProvider");return e},b=function(t){return t.isVisible};exports.BasicTooltip=u,exports.Chip=a,exports.Crosshair=h,exports.TableTooltip=p,exports.Tooltip=function(){var t=m();return b(t)?i.jsx(l,{position:t.position,anchor:t.anchor,children:t.content}):null},exports.TooltipActionsContext=d,exports.TooltipProvider=function(t){var e=t.container,o=t.children,r=v(e),n=r.actions,s=r.state;return i.jsx(d.Provider,{value:n,children:i.jsx(f.Provider,{value:s,children:o})})},exports.TooltipStateContext=f,exports.TooltipWrapper=l,exports.hiddenTooltipState=y,exports.isVisibleTooltipState=b,exports.useTooltip=function(){var e=t.useContext(d);if(void 0===e)throw new Error("useTooltip must be used within a TooltipProvider");return e},exports.useTooltipHandlers=v,exports.useTooltipState=m;
//# sourceMappingURL=nivo-tooltip.cjs.js.map

568

dist/nivo-tooltip.es.js

@@ -1,568 +0,2 @@

import { memo, useRef, useMemo, createContext, useState, useCallback, useContext } from 'react';
import { useSpring, animated } from '@react-spring/web';
import { useTheme, useMotionConfig, useMeasure, useValueFormatter } from '@nivo/core';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
}
return arr2;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
var TOOLTIP_OFFSET = 14;
var tooltipStyle = {
pointerEvents: 'none',
position: 'absolute',
zIndex: 10,
top: 0,
left: 0
};
var translate = function translate(x, y) {
return "translate(".concat(x, "px, ").concat(y, "px)");
};
var TooltipWrapper = memo(function (_ref) {
var _animatedProps$transf;
var position = _ref.position,
anchor = _ref.anchor,
children = _ref.children;
var theme = useTheme();
var _useMotionConfig = useMotionConfig(),
animate = _useMotionConfig.animate,
springConfig = _useMotionConfig.config;
var _useMeasure = useMeasure(),
_useMeasure2 = _slicedToArray(_useMeasure, 2),
measureRef = _useMeasure2[0],
bounds = _useMeasure2[1];
var previousPosition = useRef(false);
var to = undefined;
var immediate = false;
var hasDimension = bounds.width > 0 && bounds.height > 0;
var x = Math.round(position[0]);
var y = Math.round(position[1]);
if (hasDimension) {
if (anchor === 'top') {
x -= bounds.width / 2;
y -= bounds.height + TOOLTIP_OFFSET;
} else if (anchor === 'right') {
x += TOOLTIP_OFFSET;
y -= bounds.height / 2;
} else if (anchor === 'bottom') {
x -= bounds.width / 2;
y += TOOLTIP_OFFSET;
} else if (anchor === 'left') {
x -= bounds.width + TOOLTIP_OFFSET;
y -= bounds.height / 2;
} else if (anchor === 'center') {
x -= bounds.width / 2;
y -= bounds.height / 2;
}
to = {
transform: translate(x, y)
};
if (!previousPosition.current) {
immediate = true;
}
previousPosition.current = [x, y];
}
var animatedProps = useSpring({
to: to,
config: springConfig,
immediate: !animate || immediate
});
var style = _objectSpread2(_objectSpread2(_objectSpread2({}, tooltipStyle), theme.tooltip), {}, {
transform: (_animatedProps$transf = animatedProps.transform) !== null && _animatedProps$transf !== void 0 ? _animatedProps$transf : translate(x, y)
});
return jsx(animated.div, {
ref: measureRef,
style: style,
children: children
});
});
TooltipWrapper.displayName = 'TooltipWrapper';
var Chip = memo(function (_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 12 : _ref$size,
color = _ref.color,
_ref$style = _ref.style,
style = _ref$style === void 0 ? {} : _ref$style;
return jsx("span", {
style: _objectSpread2({
display: 'block',
width: size,
height: size,
background: color
}, style)
});
});
var BasicTooltip = memo(function (_ref) {
var id = _ref.id,
_value = _ref.value,
format = _ref.format,
_ref$enableChip = _ref.enableChip,
enableChip = _ref$enableChip === void 0 ? false : _ref$enableChip,
color = _ref.color,
renderContent = _ref.renderContent;
var theme = useTheme();
var formatValue = useValueFormatter(format);
var content;
if (typeof renderContent === 'function') {
content = renderContent();
} else {
var value = _value;
if (formatValue !== undefined && value !== undefined) {
value = formatValue(value);
}
content = jsxs("div", {
style: theme.tooltip.basic,
children: [enableChip && jsx(Chip, {
color: color,
style: theme.tooltip.chip
}), value !== undefined ? jsxs("span", {
children: [id, ": ", jsx("strong", {
children: "".concat(value)
})]
}) : id]
});
}
return jsx("div", {
style: theme.tooltip.container,
children: content
});
});
var tableStyle = {
width: '100%',
borderCollapse: 'collapse'
};
var TableTooltip = memo(function (_ref) {
var title = _ref.title,
_ref$rows = _ref.rows,
rows = _ref$rows === void 0 ? [] : _ref$rows,
renderContent = _ref.renderContent;
var theme = useTheme();
if (!rows.length) return null;
var content;
if (typeof renderContent === 'function') {
content = renderContent();
} else {
content = jsxs("div", {
children: [title && title, jsx("table", {
style: _objectSpread2(_objectSpread2({}, tableStyle), theme.tooltip.table),
children: jsx("tbody", {
children: rows.map(function (row, i) {
return jsx("tr", {
children: row.map(function (column, j) {
return jsx("td", {
style: theme.tooltip.tableCell,
children: column
}, j);
})
}, i);
})
})
})]
});
}
return jsx("div", {
style: theme.tooltip.container,
children: content
});
});
TableTooltip.displayName = 'TableTooltip';
var CrosshairLine = memo(function (_ref) {
var x0 = _ref.x0,
x1 = _ref.x1,
y0 = _ref.y0,
y1 = _ref.y1;
var theme = useTheme();
var _useMotionConfig = useMotionConfig(),
animate = _useMotionConfig.animate,
springConfig = _useMotionConfig.config;
var style = useMemo(function () {
return _objectSpread2(_objectSpread2({}, theme.crosshair.line), {}, {
pointerEvents: 'none'
});
}, [theme.crosshair.line]);
var animatedProps = useSpring({
x1: x0,
x2: x1,
y1: y0,
y2: y1,
config: springConfig,
immediate: !animate
});
return jsx(animated.line, _objectSpread2(_objectSpread2({}, animatedProps), {}, {
fill: "none",
style: style
}));
});
CrosshairLine.displayName = 'CrosshairLine';
var Crosshair = memo(function (_ref) {
var width = _ref.width,
height = _ref.height,
type = _ref.type,
x = _ref.x,
y = _ref.y;
var xLine;
var yLine;
if (type === 'cross') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: height
};
yLine = {
x0: 0,
x1: width,
y0: y,
y1: y
};
} else if (type === 'top-left') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: y
};
yLine = {
x0: 0,
x1: x,
y0: y,
y1: y
};
} else if (type === 'top') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: y
};
} else if (type === 'top-right') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: y
};
yLine = {
x0: x,
x1: width,
y0: y,
y1: y
};
} else if (type === 'right') {
yLine = {
x0: x,
x1: width,
y0: y,
y1: y
};
} else if (type === 'bottom-right') {
xLine = {
x0: x,
x1: x,
y0: y,
y1: height
};
yLine = {
x0: x,
x1: width,
y0: y,
y1: y
};
} else if (type === 'bottom') {
xLine = {
x0: x,
x1: x,
y0: y,
y1: height
};
} else if (type === 'bottom-left') {
xLine = {
x0: x,
x1: x,
y0: y,
y1: height
};
yLine = {
x0: 0,
x1: x,
y0: y,
y1: y
};
} else if (type === 'left') {
yLine = {
x0: 0,
x1: x,
y0: y,
y1: y
};
} else if (type === 'x') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: height
};
} else if (type === 'y') {
yLine = {
x0: 0,
x1: width,
y0: y,
y1: y
};
}
return jsxs(Fragment, {
children: [xLine && jsx(CrosshairLine, {
x0: xLine.x0,
x1: xLine.x1,
y0: xLine.y0,
y1: xLine.y1
}), yLine && jsx(CrosshairLine, {
x0: yLine.x0,
x1: yLine.x1,
y0: yLine.y0,
y1: yLine.y1
})]
});
});
Crosshair.displayName = 'Crosshair';
var defaultActions = {
showTooltipAt: function showTooltipAt() {},
showTooltipFromEvent: function showTooltipFromEvent() {},
hideTooltip: function hideTooltip() {}
};
var TooltipActionsContext = createContext(defaultActions);
var hiddenTooltipState = {
isVisible: false,
position: [null, null],
content: null,
anchor: null
};
var TooltipStateContext = createContext(hiddenTooltipState);
var useTooltipHandlers = function useTooltipHandlers(container) {
var _useState = useState(hiddenTooltipState),
_useState2 = _slicedToArray(_useState, 2),
state = _useState2[0],
setState = _useState2[1];
var showTooltipAt = useCallback(function (content, _ref) {
var _ref2 = _slicedToArray(_ref, 2),
x = _ref2[0],
y = _ref2[1];
var anchor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top';
setState({
isVisible: true,
position: [x, y],
anchor: anchor,
content: content
});
}, [setState]);
var showTooltipFromEvent = useCallback(function (content, event) {
var anchor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top';
var bounds = container.current.getBoundingClientRect();
var x = event.clientX - bounds.left;
var y = event.clientY - bounds.top;
if (anchor === 'left' || anchor === 'right') {
if (x < bounds.width / 2) anchor = 'right';else anchor = 'left';
}
setState({
isVisible: true,
position: [x, y],
anchor: anchor,
content: content
});
}, [container, setState]);
var hideTooltip = useCallback(function () {
setState(hiddenTooltipState);
}, [setState]);
var actions = useMemo(function () {
return {
showTooltipAt: showTooltipAt,
showTooltipFromEvent: showTooltipFromEvent,
hideTooltip: hideTooltip
};
}, [showTooltipAt, showTooltipFromEvent, hideTooltip]);
return {
actions: actions,
state: state
};
};
var useTooltip = function useTooltip() {
var context = useContext(TooltipActionsContext);
if (context === undefined) {
throw new Error('useTooltip must be used within a TooltipProvider');
}
return context;
};
var useTooltipState = function useTooltipState() {
var context = useContext(TooltipStateContext);
if (context === undefined) {
throw new Error('useTooltipState must be used within a TooltipProvider');
}
return context;
};
var isVisibleTooltipState = function isVisibleTooltipState(state) {
return state.isVisible;
};
var Tooltip = function Tooltip() {
var state = useTooltipState();
if (!isVisibleTooltipState(state)) {
return null;
}
return jsx(TooltipWrapper, {
position: state.position,
anchor: state.anchor,
children: state.content
});
};
var TooltipProvider = function TooltipProvider(_ref) {
var container = _ref.container,
children = _ref.children;
var _useTooltipHandlers = useTooltipHandlers(container),
actions = _useTooltipHandlers.actions,
state = _useTooltipHandlers.state;
return jsx(TooltipActionsContext.Provider, {
value: actions,
children: jsx(TooltipStateContext.Provider, {
value: state,
children: children
})
});
};
export { BasicTooltip, Chip, Crosshair, TableTooltip, Tooltip, TooltipActionsContext, TooltipProvider, TooltipStateContext, TooltipWrapper, hiddenTooltipState, isVisibleTooltipState, useTooltip, useTooltipHandlers, useTooltipState };
import{memo as t,useRef as o,useMemo as i,createContext as n,useState as r,useCallback as e,useContext as l}from"react";import{useSpring as a,animated as c}from"@react-spring/web";import{useTheme as s,useMotionConfig as h,useMeasure as u,useValueFormatter as d}from"@nivo/core";import{jsx as y,jsxs as p,Fragment as f}from"react/jsx-runtime";function v(){return v=Object.assign||function(t){for(var o=1;o<arguments.length;o++){var i=arguments[o];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},v.apply(this,arguments)}var x={pointerEvents:"none",position:"absolute",zIndex:10,top:0,left:0},m=function(t,o){return"translate("+t+"px, "+o+"px)"},g=t((function(t){var i,n=t.position,r=t.anchor,e=t.children,l=s(),d=h(),p=d.animate,f=d.config,g=u(),b=g[0],w=g[1],T=o(!1),C=void 0,E=!1,P=w.width>0&&w.height>0,N=Math.round(n[0]),V=Math.round(n[1]);P&&("top"===r?(N-=w.width/2,V-=w.height+14):"right"===r?(N+=14,V-=w.height/2):"bottom"===r?(N-=w.width/2,V+=14):"left"===r?(N-=w.width+14,V-=w.height/2):"center"===r&&(N-=w.width/2,V-=w.height/2),C={transform:m(N,V)},T.current||(E=!0),T.current=[N,V]);var j=a({to:C,config:f,immediate:!p||E}),O=v({},x,l.tooltip,{transform:null!=(i=j.transform)?i:m(N,V)});return y(c.div,{ref:b,style:O,children:e})}));g.displayName="TooltipWrapper";var b=t((function(t){var o=t.size,i=void 0===o?12:o,n=t.color,r=t.style;return y("span",{style:v({display:"block",width:i,height:i,background:n},void 0===r?{}:r)})})),w=t((function(t){var o,i=t.id,n=t.value,r=t.format,e=t.enableChip,l=void 0!==e&&e,a=t.color,c=t.renderContent,h=s(),u=d(r);if("function"==typeof c)o=c();else{var f=n;void 0!==u&&void 0!==f&&(f=u(f)),o=p("div",{style:h.tooltip.basic,children:[l&&y(b,{color:a,style:h.tooltip.chip}),void 0!==f?p("span",{children:[i,": ",y("strong",{children:""+f})]}):i]})}return y("div",{style:h.tooltip.container,children:o})})),T={width:"100%",borderCollapse:"collapse"},C=t((function(t){var o,i=t.title,n=t.rows,r=void 0===n?[]:n,e=t.renderContent,l=s();return r.length?(o="function"==typeof e?e():p("div",{children:[i&&i,y("table",{style:v({},T,l.tooltip.table),children:y("tbody",{children:r.map((function(t,o){return y("tr",{children:t.map((function(t,o){return y("td",{style:l.tooltip.tableCell,children:t},o)}))},o)}))})})]}),y("div",{style:l.tooltip.container,children:o})):null}));C.displayName="TableTooltip";var E=t((function(t){var o=t.x0,n=t.x1,r=t.y0,e=t.y1,l=s(),u=h(),d=u.animate,p=u.config,f=i((function(){return v({},l.crosshair.line,{pointerEvents:"none"})}),[l.crosshair.line]),x=a({x1:o,x2:n,y1:r,y2:e,config:p,immediate:!d});return y(c.line,v({},x,{fill:"none",style:f}))}));E.displayName="CrosshairLine";var P=t((function(t){var o,i,n=t.width,r=t.height,e=t.type,l=t.x,a=t.y;return"cross"===e?(o={x0:l,x1:l,y0:0,y1:r},i={x0:0,x1:n,y0:a,y1:a}):"top-left"===e?(o={x0:l,x1:l,y0:0,y1:a},i={x0:0,x1:l,y0:a,y1:a}):"top"===e?o={x0:l,x1:l,y0:0,y1:a}:"top-right"===e?(o={x0:l,x1:l,y0:0,y1:a},i={x0:l,x1:n,y0:a,y1:a}):"right"===e?i={x0:l,x1:n,y0:a,y1:a}:"bottom-right"===e?(o={x0:l,x1:l,y0:a,y1:r},i={x0:l,x1:n,y0:a,y1:a}):"bottom"===e?o={x0:l,x1:l,y0:a,y1:r}:"bottom-left"===e?(o={x0:l,x1:l,y0:a,y1:r},i={x0:0,x1:l,y0:a,y1:a}):"left"===e?i={x0:0,x1:l,y0:a,y1:a}:"x"===e?o={x0:l,x1:l,y0:0,y1:r}:"y"===e&&(i={x0:0,x1:n,y0:a,y1:a}),p(f,{children:[o&&y(E,{x0:o.x0,x1:o.x1,y0:o.y0,y1:o.y1}),i&&y(E,{x0:i.x0,x1:i.x1,y0:i.y0,y1:i.y1})]})}));P.displayName="Crosshair";var N=n({showTooltipAt:function(){},showTooltipFromEvent:function(){},hideTooltip:function(){}}),V={isVisible:!1,position:[null,null],content:null,anchor:null},j=n(V),O=function(t){var o=r(V),n=o[0],l=o[1],a=e((function(t,o,i){var n=o[0],r=o[1];void 0===i&&(i="top"),l({isVisible:!0,position:[n,r],anchor:i,content:t})}),[l]),c=e((function(o,i,n){void 0===n&&(n="top");var r=t.current.getBoundingClientRect(),e=i.clientX-r.left,a=i.clientY-r.top;"left"!==n&&"right"!==n||(n=e<r.width/2?"right":"left"),l({isVisible:!0,position:[e,a],anchor:n,content:o})}),[t,l]),s=e((function(){l(V)}),[l]);return{actions:i((function(){return{showTooltipAt:a,showTooltipFromEvent:c,hideTooltip:s}}),[a,c,s]),state:n}},k=function(){var t=l(N);if(void 0===t)throw new Error("useTooltip must be used within a TooltipProvider");return t},z=function(){var t=l(j);if(void 0===t)throw new Error("useTooltipState must be used within a TooltipProvider");return t},A=function(t){return t.isVisible},F=function(){var t=z();return A(t)?y(g,{position:t.position,anchor:t.anchor,children:t.content}):null},M=function(t){var o=t.container,i=t.children,n=O(o),r=n.actions,e=n.state;return y(N.Provider,{value:r,children:y(j.Provider,{value:e,children:i})})};export{w as BasicTooltip,b as Chip,P as Crosshair,C as TableTooltip,F as Tooltip,N as TooltipActionsContext,M as TooltipProvider,j as TooltipStateContext,g as TooltipWrapper,V as hiddenTooltipState,A as isVisibleTooltipState,k as useTooltip,O as useTooltipHandlers,z as useTooltipState};
//# sourceMappingURL=nivo-tooltip.es.js.map

586

dist/nivo-tooltip.umd.js

@@ -1,586 +0,2 @@

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@react-spring/web'), require('@nivo/core'), require('react/jsx-runtime')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', '@react-spring/web', '@nivo/core', 'react/jsx-runtime'], factory) :
(global = global || self, factory(global.nivo = global.nivo || {}, global.React, global['@react-spring/web'], global.nivo, global['react/jsx-runtime']));
}(this, (function (exports, react, web, core, jsxRuntime) { 'use strict';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
}
return arr2;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
var TOOLTIP_OFFSET = 14;
var tooltipStyle = {
pointerEvents: 'none',
position: 'absolute',
zIndex: 10,
top: 0,
left: 0
};
var translate = function translate(x, y) {
return "translate(".concat(x, "px, ").concat(y, "px)");
};
var TooltipWrapper = react.memo(function (_ref) {
var _animatedProps$transf;
var position = _ref.position,
anchor = _ref.anchor,
children = _ref.children;
var theme = core.useTheme();
var _useMotionConfig = core.useMotionConfig(),
animate = _useMotionConfig.animate,
springConfig = _useMotionConfig.config;
var _useMeasure = core.useMeasure(),
_useMeasure2 = _slicedToArray(_useMeasure, 2),
measureRef = _useMeasure2[0],
bounds = _useMeasure2[1];
var previousPosition = react.useRef(false);
var to = undefined;
var immediate = false;
var hasDimension = bounds.width > 0 && bounds.height > 0;
var x = Math.round(position[0]);
var y = Math.round(position[1]);
if (hasDimension) {
if (anchor === 'top') {
x -= bounds.width / 2;
y -= bounds.height + TOOLTIP_OFFSET;
} else if (anchor === 'right') {
x += TOOLTIP_OFFSET;
y -= bounds.height / 2;
} else if (anchor === 'bottom') {
x -= bounds.width / 2;
y += TOOLTIP_OFFSET;
} else if (anchor === 'left') {
x -= bounds.width + TOOLTIP_OFFSET;
y -= bounds.height / 2;
} else if (anchor === 'center') {
x -= bounds.width / 2;
y -= bounds.height / 2;
}
to = {
transform: translate(x, y)
};
if (!previousPosition.current) {
immediate = true;
}
previousPosition.current = [x, y];
}
var animatedProps = web.useSpring({
to: to,
config: springConfig,
immediate: !animate || immediate
});
var style = _objectSpread2(_objectSpread2(_objectSpread2({}, tooltipStyle), theme.tooltip), {}, {
transform: (_animatedProps$transf = animatedProps.transform) !== null && _animatedProps$transf !== void 0 ? _animatedProps$transf : translate(x, y)
});
return jsxRuntime.jsx(web.animated.div, {
ref: measureRef,
style: style,
children: children
});
});
TooltipWrapper.displayName = 'TooltipWrapper';
var Chip = react.memo(function (_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 12 : _ref$size,
color = _ref.color,
_ref$style = _ref.style,
style = _ref$style === void 0 ? {} : _ref$style;
return jsxRuntime.jsx("span", {
style: _objectSpread2({
display: 'block',
width: size,
height: size,
background: color
}, style)
});
});
var BasicTooltip = react.memo(function (_ref) {
var id = _ref.id,
_value = _ref.value,
format = _ref.format,
_ref$enableChip = _ref.enableChip,
enableChip = _ref$enableChip === void 0 ? false : _ref$enableChip,
color = _ref.color,
renderContent = _ref.renderContent;
var theme = core.useTheme();
var formatValue = core.useValueFormatter(format);
var content;
if (typeof renderContent === 'function') {
content = renderContent();
} else {
var value = _value;
if (formatValue !== undefined && value !== undefined) {
value = formatValue(value);
}
content = jsxRuntime.jsxs("div", {
style: theme.tooltip.basic,
children: [enableChip && jsxRuntime.jsx(Chip, {
color: color,
style: theme.tooltip.chip
}), value !== undefined ? jsxRuntime.jsxs("span", {
children: [id, ": ", jsxRuntime.jsx("strong", {
children: "".concat(value)
})]
}) : id]
});
}
return jsxRuntime.jsx("div", {
style: theme.tooltip.container,
children: content
});
});
var tableStyle = {
width: '100%',
borderCollapse: 'collapse'
};
var TableTooltip = react.memo(function (_ref) {
var title = _ref.title,
_ref$rows = _ref.rows,
rows = _ref$rows === void 0 ? [] : _ref$rows,
renderContent = _ref.renderContent;
var theme = core.useTheme();
if (!rows.length) return null;
var content;
if (typeof renderContent === 'function') {
content = renderContent();
} else {
content = jsxRuntime.jsxs("div", {
children: [title && title, jsxRuntime.jsx("table", {
style: _objectSpread2(_objectSpread2({}, tableStyle), theme.tooltip.table),
children: jsxRuntime.jsx("tbody", {
children: rows.map(function (row, i) {
return jsxRuntime.jsx("tr", {
children: row.map(function (column, j) {
return jsxRuntime.jsx("td", {
style: theme.tooltip.tableCell,
children: column
}, j);
})
}, i);
})
})
})]
});
}
return jsxRuntime.jsx("div", {
style: theme.tooltip.container,
children: content
});
});
TableTooltip.displayName = 'TableTooltip';
var CrosshairLine = react.memo(function (_ref) {
var x0 = _ref.x0,
x1 = _ref.x1,
y0 = _ref.y0,
y1 = _ref.y1;
var theme = core.useTheme();
var _useMotionConfig = core.useMotionConfig(),
animate = _useMotionConfig.animate,
springConfig = _useMotionConfig.config;
var style = react.useMemo(function () {
return _objectSpread2(_objectSpread2({}, theme.crosshair.line), {}, {
pointerEvents: 'none'
});
}, [theme.crosshair.line]);
var animatedProps = web.useSpring({
x1: x0,
x2: x1,
y1: y0,
y2: y1,
config: springConfig,
immediate: !animate
});
return jsxRuntime.jsx(web.animated.line, _objectSpread2(_objectSpread2({}, animatedProps), {}, {
fill: "none",
style: style
}));
});
CrosshairLine.displayName = 'CrosshairLine';
var Crosshair = react.memo(function (_ref) {
var width = _ref.width,
height = _ref.height,
type = _ref.type,
x = _ref.x,
y = _ref.y;
var xLine;
var yLine;
if (type === 'cross') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: height
};
yLine = {
x0: 0,
x1: width,
y0: y,
y1: y
};
} else if (type === 'top-left') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: y
};
yLine = {
x0: 0,
x1: x,
y0: y,
y1: y
};
} else if (type === 'top') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: y
};
} else if (type === 'top-right') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: y
};
yLine = {
x0: x,
x1: width,
y0: y,
y1: y
};
} else if (type === 'right') {
yLine = {
x0: x,
x1: width,
y0: y,
y1: y
};
} else if (type === 'bottom-right') {
xLine = {
x0: x,
x1: x,
y0: y,
y1: height
};
yLine = {
x0: x,
x1: width,
y0: y,
y1: y
};
} else if (type === 'bottom') {
xLine = {
x0: x,
x1: x,
y0: y,
y1: height
};
} else if (type === 'bottom-left') {
xLine = {
x0: x,
x1: x,
y0: y,
y1: height
};
yLine = {
x0: 0,
x1: x,
y0: y,
y1: y
};
} else if (type === 'left') {
yLine = {
x0: 0,
x1: x,
y0: y,
y1: y
};
} else if (type === 'x') {
xLine = {
x0: x,
x1: x,
y0: 0,
y1: height
};
} else if (type === 'y') {
yLine = {
x0: 0,
x1: width,
y0: y,
y1: y
};
}
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [xLine && jsxRuntime.jsx(CrosshairLine, {
x0: xLine.x0,
x1: xLine.x1,
y0: xLine.y0,
y1: xLine.y1
}), yLine && jsxRuntime.jsx(CrosshairLine, {
x0: yLine.x0,
x1: yLine.x1,
y0: yLine.y0,
y1: yLine.y1
})]
});
});
Crosshair.displayName = 'Crosshair';
var defaultActions = {
showTooltipAt: function showTooltipAt() {},
showTooltipFromEvent: function showTooltipFromEvent() {},
hideTooltip: function hideTooltip() {}
};
var TooltipActionsContext = react.createContext(defaultActions);
var hiddenTooltipState = {
isVisible: false,
position: [null, null],
content: null,
anchor: null
};
var TooltipStateContext = react.createContext(hiddenTooltipState);
var useTooltipHandlers = function useTooltipHandlers(container) {
var _useState = react.useState(hiddenTooltipState),
_useState2 = _slicedToArray(_useState, 2),
state = _useState2[0],
setState = _useState2[1];
var showTooltipAt = react.useCallback(function (content, _ref) {
var _ref2 = _slicedToArray(_ref, 2),
x = _ref2[0],
y = _ref2[1];
var anchor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top';
setState({
isVisible: true,
position: [x, y],
anchor: anchor,
content: content
});
}, [setState]);
var showTooltipFromEvent = react.useCallback(function (content, event) {
var anchor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top';
var bounds = container.current.getBoundingClientRect();
var x = event.clientX - bounds.left;
var y = event.clientY - bounds.top;
if (anchor === 'left' || anchor === 'right') {
if (x < bounds.width / 2) anchor = 'right';else anchor = 'left';
}
setState({
isVisible: true,
position: [x, y],
anchor: anchor,
content: content
});
}, [container, setState]);
var hideTooltip = react.useCallback(function () {
setState(hiddenTooltipState);
}, [setState]);
var actions = react.useMemo(function () {
return {
showTooltipAt: showTooltipAt,
showTooltipFromEvent: showTooltipFromEvent,
hideTooltip: hideTooltip
};
}, [showTooltipAt, showTooltipFromEvent, hideTooltip]);
return {
actions: actions,
state: state
};
};
var useTooltip = function useTooltip() {
var context = react.useContext(TooltipActionsContext);
if (context === undefined) {
throw new Error('useTooltip must be used within a TooltipProvider');
}
return context;
};
var useTooltipState = function useTooltipState() {
var context = react.useContext(TooltipStateContext);
if (context === undefined) {
throw new Error('useTooltipState must be used within a TooltipProvider');
}
return context;
};
var isVisibleTooltipState = function isVisibleTooltipState(state) {
return state.isVisible;
};
var Tooltip = function Tooltip() {
var state = useTooltipState();
if (!isVisibleTooltipState(state)) {
return null;
}
return jsxRuntime.jsx(TooltipWrapper, {
position: state.position,
anchor: state.anchor,
children: state.content
});
};
var TooltipProvider = function TooltipProvider(_ref) {
var container = _ref.container,
children = _ref.children;
var _useTooltipHandlers = useTooltipHandlers(container),
actions = _useTooltipHandlers.actions,
state = _useTooltipHandlers.state;
return jsxRuntime.jsx(TooltipActionsContext.Provider, {
value: actions,
children: jsxRuntime.jsx(TooltipStateContext.Provider, {
value: state,
children: children
})
});
};
exports.BasicTooltip = BasicTooltip;
exports.Chip = Chip;
exports.Crosshair = Crosshair;
exports.TableTooltip = TableTooltip;
exports.Tooltip = Tooltip;
exports.TooltipActionsContext = TooltipActionsContext;
exports.TooltipProvider = TooltipProvider;
exports.TooltipStateContext = TooltipStateContext;
exports.TooltipWrapper = TooltipWrapper;
exports.hiddenTooltipState = hiddenTooltipState;
exports.isVisibleTooltipState = isVisibleTooltipState;
exports.useTooltip = useTooltip;
exports.useTooltipHandlers = useTooltipHandlers;
exports.useTooltipState = useTooltipState;
Object.defineProperty(exports, '__esModule', { value: true });
})));
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("@react-spring/web"),require("@nivo/core"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","@react-spring/web","@nivo/core","react/jsx-runtime"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).nivo=t.nivo||{},t.React,t["@react-spring/web"],t.nivo,t["react/jsx-runtime"])}(this,(function(t,e,o,i,n){"use strict";function r(){return r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var i in o)Object.prototype.hasOwnProperty.call(o,i)&&(t[i]=o[i])}return t},r.apply(this,arguments)}var s={pointerEvents:"none",position:"absolute",zIndex:10,top:0,left:0},l=function(t,e){return"translate("+t+"px, "+e+"px)"},a=e.memo((function(t){var a,u=t.position,c=t.anchor,p=t.children,d=i.useTheme(),h=i.useMotionConfig(),x=h.animate,y=h.config,f=i.useMeasure(),v=f[0],m=f[1],b=e.useRef(!1),g=void 0,T=!1,j=m.width>0&&m.height>0,w=Math.round(u[0]),C=Math.round(u[1]);j&&("top"===c?(w-=m.width/2,C-=m.height+14):"right"===c?(w+=14,C-=m.height/2):"bottom"===c?(w-=m.width/2,C+=14):"left"===c?(w-=m.width+14,C-=m.height/2):"center"===c&&(w-=m.width/2,C-=m.height/2),g={transform:l(w,C)},b.current||(T=!0),b.current=[w,C]);var M=o.useSpring({to:g,config:y,immediate:!x||T}),S=r({},s,d.tooltip,{transform:null!=(a=M.transform)?a:l(w,C)});return n.jsx(o.animated.div,{ref:v,style:S,children:p})}));a.displayName="TooltipWrapper";var u=e.memo((function(t){var e=t.size,o=void 0===e?12:e,i=t.color,s=t.style,l=void 0===s?{}:s;return n.jsx("span",{style:r({display:"block",width:o,height:o,background:i},l)})})),c=e.memo((function(t){var e,o=t.id,r=t.value,s=t.format,l=t.enableChip,a=void 0!==l&&l,c=t.color,p=t.renderContent,d=i.useTheme(),h=i.useValueFormatter(s);if("function"==typeof p)e=p();else{var x=r;void 0!==h&&void 0!==x&&(x=h(x)),e=n.jsxs("div",{style:d.tooltip.basic,children:[a&&n.jsx(u,{color:c,style:d.tooltip.chip}),void 0!==x?n.jsxs("span",{children:[o,": ",n.jsx("strong",{children:""+x})]}):o]})}return n.jsx("div",{style:d.tooltip.container,children:e})})),p={width:"100%",borderCollapse:"collapse"},d=e.memo((function(t){var e,o=t.title,s=t.rows,l=void 0===s?[]:s,a=t.renderContent,u=i.useTheme();return l.length?(e="function"==typeof a?a():n.jsxs("div",{children:[o&&o,n.jsx("table",{style:r({},p,u.tooltip.table),children:n.jsx("tbody",{children:l.map((function(t,e){return n.jsx("tr",{children:t.map((function(t,e){return n.jsx("td",{style:u.tooltip.tableCell,children:t},e)}))},e)}))})})]}),n.jsx("div",{style:u.tooltip.container,children:e})):null}));d.displayName="TableTooltip";var h=e.memo((function(t){var s=t.x0,l=t.x1,a=t.y0,u=t.y1,c=i.useTheme(),p=i.useMotionConfig(),d=p.animate,h=p.config,x=e.useMemo((function(){return r({},c.crosshair.line,{pointerEvents:"none"})}),[c.crosshair.line]),y=o.useSpring({x1:s,x2:l,y1:a,y2:u,config:h,immediate:!d});return n.jsx(o.animated.line,r({},y,{fill:"none",style:x}))}));h.displayName="CrosshairLine";var x=e.memo((function(t){var e,o,i=t.width,r=t.height,s=t.type,l=t.x,a=t.y;return"cross"===s?(e={x0:l,x1:l,y0:0,y1:r},o={x0:0,x1:i,y0:a,y1:a}):"top-left"===s?(e={x0:l,x1:l,y0:0,y1:a},o={x0:0,x1:l,y0:a,y1:a}):"top"===s?e={x0:l,x1:l,y0:0,y1:a}:"top-right"===s?(e={x0:l,x1:l,y0:0,y1:a},o={x0:l,x1:i,y0:a,y1:a}):"right"===s?o={x0:l,x1:i,y0:a,y1:a}:"bottom-right"===s?(e={x0:l,x1:l,y0:a,y1:r},o={x0:l,x1:i,y0:a,y1:a}):"bottom"===s?e={x0:l,x1:l,y0:a,y1:r}:"bottom-left"===s?(e={x0:l,x1:l,y0:a,y1:r},o={x0:0,x1:l,y0:a,y1:a}):"left"===s?o={x0:0,x1:l,y0:a,y1:a}:"x"===s?e={x0:l,x1:l,y0:0,y1:r}:"y"===s&&(o={x0:0,x1:i,y0:a,y1:a}),n.jsxs(n.Fragment,{children:[e&&n.jsx(h,{x0:e.x0,x1:e.x1,y0:e.y0,y1:e.y1}),o&&n.jsx(h,{x0:o.x0,x1:o.x1,y0:o.y0,y1:o.y1})]})}));x.displayName="Crosshair";var y=e.createContext({showTooltipAt:function(){},showTooltipFromEvent:function(){},hideTooltip:function(){}}),f={isVisible:!1,position:[null,null],content:null,anchor:null},v=e.createContext(f),m=function(t){var o=e.useState(f),i=o[0],n=o[1],r=e.useCallback((function(t,e,o){var i=e[0],r=e[1];void 0===o&&(o="top"),n({isVisible:!0,position:[i,r],anchor:o,content:t})}),[n]),s=e.useCallback((function(e,o,i){void 0===i&&(i="top");var r=t.current.getBoundingClientRect(),s=o.clientX-r.left,l=o.clientY-r.top;"left"!==i&&"right"!==i||(i=s<r.width/2?"right":"left"),n({isVisible:!0,position:[s,l],anchor:i,content:e})}),[t,n]),l=e.useCallback((function(){n(f)}),[n]);return{actions:e.useMemo((function(){return{showTooltipAt:r,showTooltipFromEvent:s,hideTooltip:l}}),[r,s,l]),state:i}},b=function(){var t=e.useContext(v);if(void 0===t)throw new Error("useTooltipState must be used within a TooltipProvider");return t},g=function(t){return t.isVisible};t.BasicTooltip=c,t.Chip=u,t.Crosshair=x,t.TableTooltip=d,t.Tooltip=function(){var t=b();return g(t)?n.jsx(a,{position:t.position,anchor:t.anchor,children:t.content}):null},t.TooltipActionsContext=y,t.TooltipProvider=function(t){var e=t.container,o=t.children,i=m(e),r=i.actions,s=i.state;return n.jsx(y.Provider,{value:r,children:n.jsx(v.Provider,{value:s,children:o})})},t.TooltipStateContext=v,t.TooltipWrapper=a,t.hiddenTooltipState=f,t.isVisibleTooltipState=g,t.useTooltip=function(){var t=e.useContext(y);if(void 0===t)throw new Error("useTooltip must be used within a TooltipProvider");return t},t.useTooltipHandlers=m,t.useTooltipState=b,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=nivo-tooltip.umd.js.map

3

dist/types/BasicTooltip.d.ts
import { ReactNode } from 'react';
import { ValueFormat } from '@nivo/core';
interface BasicTooltipProps {
export interface BasicTooltipProps {
id: ReactNode;

@@ -15,3 +15,2 @@ value?: number | string | Date;

export declare const BasicTooltip: import("react").NamedExoticComponent<BasicTooltipProps>;
export {};
//# sourceMappingURL=BasicTooltip.d.ts.map

8

package.json
{
"name": "@nivo/tooltip",
"version": "0.74.1",
"version": "0.75.0",
"license": "MIT",

@@ -27,6 +27,6 @@ "author": {

"devDependencies": {
"@nivo/core": "0.74.1"
"@nivo/core": "0.75.0"
},
"peerDependencies": {
"@nivo/core": "0.74.1"
"@nivo/core": "0.75.0"
},

@@ -36,3 +36,3 @@ "publishConfig": {

},
"gitHead": "4ae8bc60779cb9bb8cb14b16726819217da16133"
"gitHead": "bfe8126876bf0e46ad82251935ab78178e901bcf"
}
dist/nivo-tooltip.cjs.js.map

Sorry, the diff of this file is not supported yet

dist/nivo-tooltip.es.js.map

Sorry, the diff of this file is not supported yet

dist/nivo-tooltip.umd.js.map

Sorry, the diff of this file is not supported yet

dist/types/BasicTooltip.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with āš”ļø by Socket Inc