@progress/kendo-react-charts
Version:
React Chart renders a wide range of high-quality data visualizations. KendoReact Charts package
66 lines (65 loc) • 3.13 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as t from "react";
import * as k from "react-dom";
import { IconWrap as I } from "@progress/kendo-react-common";
import { arrowLeftIcon as b, arrowRightIcon as w } from "@progress/kendo-svg-icons";
import { useInternationalization as T, useLocalization as z } from "@progress/kendo-react-intl";
import { tooltipUnitFormat as h, messages as C } from "./messages.mjs";
const $ = (e) => {
const {
appendTo: n,
Content: l,
dir: c,
offset: o,
event: { tooltipData: s, dataItem: x, nodeValue: v }
} = e, f = t.useRef(null);
t.useEffect(() => {
const r = f.current;
if (!s || !r)
return;
const d = { width: r.offsetWidth, height: r.offsetHeight }, a = { ...s.popupOffset }, m = s.popupAlign;
a.left += m.horizontal === "left" ? o : -1 * o, m.horizontal === "right" && (a.left -= d.width), m.vertical === "bottom" ? a.top -= d.height + o : a.top += o, r.style.left = `${a.left}px`, r.style.top = `${a.top}px`, r.style.visibility = "";
}, [s, o]);
const u = /* @__PURE__ */ t.createElement(
"div",
{
ref: f,
style: { visibility: "hidden" },
dir: c,
className: "k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip"
},
/* @__PURE__ */ t.createElement("div", { className: "k-tooltip-content" }, /* @__PURE__ */ t.createElement(l, { dir: c, dataItem: x, nodeValue: v }))
);
return n ? k.createPortal(u, n) : u;
}, g = 3, L = `0 ${g}px`, E = { display: "flex", alignItems: "center" }, p = (e) => /* @__PURE__ */ t.createElement(
"div",
{
style: {
width: 15,
height: 15,
backgroundColor: e.color,
display: "inline-flex",
marginLeft: g
}
}
), i = (e) => /* @__PURE__ */ t.createElement("span", { style: { margin: L } }, e.children), y = (e) => T().format(
z().toLanguageString(h, C[h]),
[e || 0]
), A = (e) => {
const { color: n, label: l } = e.dataItem;
return /* @__PURE__ */ t.createElement("div", { style: E, className: "k-tooltip-content" }, /* @__PURE__ */ t.createElement(p, { color: n }), /* @__PURE__ */ t.createElement(i, null, l.text), /* @__PURE__ */ t.createElement(i, null, y(e.nodeValue)));
}, D = (e) => {
const { source: n, target: l, value: c } = e.dataItem, o = e.dir === "rtl" ? b : w;
return /* @__PURE__ */ t.createElement("div", { style: E }, /* @__PURE__ */ t.createElement(p, { color: n.color }), /* @__PURE__ */ t.createElement(i, null, n.label.text), /* @__PURE__ */ t.createElement(I, { icon: o, name: o.name }), /* @__PURE__ */ t.createElement(p, { color: l.color }), /* @__PURE__ */ t.createElement(i, null, l.label.text), /* @__PURE__ */ t.createElement(i, null, y(c)));
};
export {
D as LinkTooltipContent,
A as NodeTooltipContent,
$ as TooltipComponent
};