terriajs
Version:
Geospatial data visualization platform.
65 lines • 3.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tooltip as VisxTooltip } from "@visx/tooltip";
import dateformat from "dateformat";
import groupBy from "lodash-es/groupBy";
import { observer } from "mobx-react";
import { memo, useMemo, useRef } from "react";
import { CSSTransition } from "react-transition-group";
import Styles from "./tooltip.scss";
const Tooltip = observer((props) => {
const prevItems = useRef([]);
const items = useMemo(() => {
const propItems = props.items;
if (propItems && propItems.length > 0) {
prevItems.current = propItems;
return propItems;
}
else {
return prevItems.current;
}
}, [props.items]);
const title = useMemo(() => {
if (items.length > 0) {
// derive title from first item x
const x = items[0].point.x;
return x instanceof Date ? dateformat(x, "dd/mm/yyyy, HH:MMTT") : x;
}
else
return undefined;
}, [items]);
const groups = useMemo(() => {
// momentLines and momentPoints are not shown in the tooltip body
const tooltipItems = items.filter(({ chartItem }) => chartItem.type !== "momentLines" && chartItem.type !== "momentPoints");
return Object.entries(groupBy(tooltipItems, "chartItem.categoryName")).map((o) => ({
name: o[0],
items: o[1]
}));
}, [items]);
const style = useMemo(() => {
const { left, right, top, bottom } = props;
return {
left: left === undefined ? "" : `${left}px`,
right: right === undefined ? "" : `${right}px`,
top: top === undefined ? "" : `${top}px`,
bottom: bottom === undefined ? "" : `${bottom}px`,
position: "absolute",
boxShadow: "0 1px 2px rgba(33,33,33,0.2)"
};
}, [props]);
const show = props.items.length > 0;
return (_jsx(CSSTransition, { in: show, classNames: "transition", timeout: 1000, unmountOnExit: true, children: _jsxs(VisxTooltip, { className: Styles.tooltip, style: style, children: [_jsx("div", { children: title }), _jsx("div", { children: groups.map((group) => (_jsx(TooltipGroup, { name: groups.length > 1 ? group.name : undefined, items: group.items }, `tooltip-group-${group.name}`))) })] }, Math.random()) }));
});
Tooltip.displayName = "Tooltip";
const TooltipGroup = memo(({ name, items }) => {
return (_jsxs("div", { className: Styles.group, children: [name && _jsx("div", { children: name }), items.map((item) => (_jsx(TooltipItem, { item: item }, `tooltipitem-${item.chartItem.key}`)))] }));
});
TooltipGroup.displayName = "TooltipGroup";
const TooltipItem = observer(({ item }) => {
const chartItem = item.chartItem;
const value = item.point.y;
const formattedValue = isNaN(value) ? value : value.toFixed(2);
return (_jsxs("div", { className: Styles.item, children: [_jsx("div", { className: Styles.itemSymbol, style: { backgroundColor: chartItem.getColor() } }), _jsx("div", { className: Styles.itemName, children: chartItem.name }), _jsx("div", { className: Styles.itemValue, children: formattedValue }), _jsx("div", { children: chartItem.units })] }));
});
TooltipItem.displayName = "TooltipItem";
export default Tooltip;
//# sourceMappingURL=Tooltip.js.map