@progress/kendo-vue-charts
Version:
195 lines (194 loc) • 4.76 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 { defineComponent as s, createVNode as t, h as v } from "vue";
import { getTemplate as b, setRef as y, getRef as T, Icon as S } from "@progress/kendo-vue-common";
import { arrowLeftIcon as k, arrowRightIcon as x } from "@progress/kendo-svg-icons";
import { provideLocalizationService as $, IntlService as w } from "@progress/kendo-vue-intl";
import { tooltipUnitFormat as c, messages as C } from "./messages.mjs";
const d = 3, I = `0 ${d}px`, m = {
display: "flex",
alignItems: "center"
}, p = /* @__PURE__ */ s({
name: "Square",
props: {
color: String
},
render() {
return t("div", {
style: {
width: "15px",
height: "15px",
"background-color": this.$props.color,
display: "inline-flex",
marginLeft: d
}
}, null);
}
}), a = /* @__PURE__ */ s({
name: "Text",
props: {
value: String
},
render() {
return t("span", {
style: {
margin: I
}
}, [this.$props.value]);
}
}), u = /* @__PURE__ */ s({
name: "Units",
props: {
value: Number
},
inject: {
kendoLocalizationService: {
default: null
}
},
render() {
const o = $(this).toLanguageString(c, C[c]), n = new w("en").format(o, [this.$props.value || 0]);
return t(a, {
value: n
}, null);
}
}), O = /* @__PURE__ */ s({
name: "NodeTooltipContent",
props: {
dataItem: Object,
nodeValue: Number,
dir: String
},
render() {
const {
color: e,
label: o
} = this.$props.dataItem;
return t("div", {
style: m,
class: "k-tooltip-content"
}, [t(p, {
color: e
}, null), t(a, {
value: o.text
}, null), t(u, {
value: this.$props.nodeValue
}, null)]);
}
}), j = /* @__PURE__ */ s({
name: "LinkTooltipContent",
props: {
dataItem: Object,
dir: String,
nodeValue: Number
},
render() {
const {
dir: e,
dataItem: o
} = this.$props, {
source: n,
target: r,
value: i
} = o, l = e === "rtl" ? k : x;
return t("div", {
style: m
}, [t(p, {
color: n.color
}, null), t(a, {
value: n.label.text
}, null), t(S, {
icon: l,
name: l.name
}, null), t(p, {
color: r.color
}, null), t(a, {
value: r.label.text
}, null), t(u, {
value: i
}, null)]);
}
}), R = /* @__PURE__ */ s({
name: "SankeyTooltip",
props: {
eventData: Object,
tooltipData: Object,
nodeContent: [String, Object, Function],
linkContent: [String, Object, Function],
dir: String,
offset: Number,
appendTo: Object
},
data() {
return {
top: "",
left: "",
visibility: "hidden"
};
},
mounted() {
this.element = T(this, "element"), this.showTooltip();
},
updated() {
this.showTooltip();
const e = this.$props.appendTo ? this.$props.appendTo : this.element.ownerDocument.body;
this.element.parentElement !== e && this.element.ownerDocument.body.append(this.element);
},
methods: {
showTooltip() {
const {
offset: e,
tooltipData: o
} = this.$props, n = this.element;
if (!o || !n)
return;
const r = {
width: n.offsetWidth,
height: n.offsetHeight
}, i = {
...o.popupOffset
}, l = o.popupAlign;
i.left += l.horizontal === "left" ? e : -1 * e, l.horizontal === "right" && (i.left -= r.width), l.vertical === "bottom" ? i.top -= r.height + e : i.top += e, this.$data.top = i.top + "px", this.$data.left = i.left + "px", this.$data.visibility = "";
}
},
render() {
const {
nodeContent: e,
linkContent: o,
dir: n,
eventData: {
dataItem: r,
nodeValue: i,
targetType: l
}
} = this.$props, h = l === "node" ? e : o, f = l === "node" ? O : j, g = b.call(this, {
h: v,
template: h,
defaultRendering: t(f, {
dataItem: r,
nodeValue: i,
dir: n
}, null)
});
return t("div", {
ref: y(this, "element"),
style: {
top: this.top,
left: this.left,
visibility: this.visibility
},
class: "k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip",
dir: n
}, [t("div", {
class: "k-tooltip-content"
}, [g])]);
}
});
export {
R as Tooltip
};