Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@nivo/tooltip
Advanced tools
@nivo/tooltip - npm Package Compare versions
Comparing version 0.74.1 to 0.75.0
@@ -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 |
@@ -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 |
@@ -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 |
| 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 |
| { | ||
| "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" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-45.92%
89617
- Lines of code
- decreased by-89.55%
176
- Number of low quality alerts
- increased by100%
4
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes