react-gifted-charts
Version:
ReactJS counterpart of react-native-gifted-charts. An intuitive charting library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid and Radar charts in React
77 lines • 3.5 kB
JavaScript
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect, useRef } from 'react';
var Tooltip = function (props) {
var divRef = useRef(null);
var barWidth = props.barWidth, item = props.item, index = props.index, isLast = props.isLast, leftSpacing = props.leftSpacing, leftShiftForLastIndexTooltip = props.leftShiftForLastIndexTooltip, leftShiftForTooltip = props.leftShiftForTooltip, renderTooltip = props.renderTooltip, autoCenterTooltip = props.autoCenterTooltip, horizontal = props.horizontal, bottom = props.bottom;
// const [width, setWidth] = useState(0);
var _a = __read(useState(0), 2), leftShiftTooltipForCentering = _a[0], setLeftShiftTooltipForCentering = _a[1];
useEffect(function () {
var divElement = divRef.current;
var resizeObserver;
if (autoCenterTooltip) {
resizeObserver = new ResizeObserver(function (entries) {
var e_1, _a;
try {
for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
var entry = entries_1_1.value;
var width = entry.contentRect.width;
setLeftShiftTooltipForCentering((width - barWidth) / 2);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
}
finally { if (e_1) throw e_1.error; }
}
});
if (divElement) {
resizeObserver.observe(divElement);
}
}
return function () {
if (divElement) {
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(divElement);
}
};
}, []);
return (_jsx("div", { ref: divRef, style: {
position: 'absolute',
bottom: bottom - 28,
left: leftSpacing -
(isLast ? leftShiftForLastIndexTooltip : leftShiftForTooltip) -
leftShiftTooltipForCentering,
zIndex: 1000,
transform: "rotate(".concat(horizontal ? -90 : 0, "deg)")
}, children: renderTooltip === null || renderTooltip === void 0 ? void 0 : renderTooltip(item, index) }));
};
export default Tooltip;
//# sourceMappingURL=tooltip.js.map