@mui/x-charts
Version:
The community edition of the Charts components (MUI X).
98 lines (96 loc) • 2.69 kB
JavaScript
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.generateVirtualElement = generateVirtualElement;
exports.getTooltipHasData = getTooltipHasData;
exports.useMouseTracker = useMouseTracker;
exports.utcFormatter = utcFormatter;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _hooks = require("../hooks");
function generateVirtualElement(mousePosition) {
if (mousePosition === null) {
return {
getBoundingClientRect: () => ({
width: 0,
height: 0,
x: 0,
y: 0,
top: 0,
right: 0,
bottom: 0,
left: 0,
toJSON: () => ''
})
};
}
const {
x,
y
} = mousePosition;
const boundingBox = {
width: 0,
height: 0,
x,
y,
top: y,
right: x,
bottom: y,
left: x
};
return {
getBoundingClientRect: () => (0, _extends2.default)({}, boundingBox, {
toJSON: () => JSON.stringify(boundingBox)
})
};
}
function useMouseTracker() {
const svgRef = (0, _hooks.useSvgRef)();
// Use a ref to avoid rerendering on every mousemove event.
const [mousePosition, setMousePosition] = React.useState(null);
React.useEffect(() => {
const element = svgRef.current;
if (element === null) {
return () => {};
}
const handleOut = event => {
if (event.pointerType !== 'mouse') {
setMousePosition(null);
}
};
const handleMove = event => {
setMousePosition({
x: event.clientX,
y: event.clientY,
height: event.height,
pointerType: event.pointerType
});
};
element.addEventListener('pointerdown', handleMove);
element.addEventListener('pointermove', handleMove);
element.addEventListener('pointerup', handleOut);
return () => {
element.removeEventListener('pointerdown', handleMove);
element.removeEventListener('pointermove', handleMove);
element.removeEventListener('pointerup', handleOut);
};
}, [svgRef]);
return mousePosition;
}
function getTooltipHasData(trigger, displayedData) {
if (trigger === 'item') {
return displayedData !== null;
}
const hasAxisXData = displayedData.x !== null;
const hasAxisYData = displayedData.y !== null;
return hasAxisXData || hasAxisYData;
}
function utcFormatter(v) {
if (v instanceof Date) {
return v.toUTCString();
}
return v.toLocaleString();
}
;