vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,563 lines • 57.9 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, D as n, Kt as r, Pt as i, X as a, a as o, i as s, q as c, r as l, x as u } from "./lib-Bttd6u5E.js";
import { n as d, t as f } from "./useHints-Dq_w2E8B.js";
import { t as p } from "./useConfig-D3scuR88.js";
import { t as m } from "./usePrinter-DN5bYhTG.js";
import { t as h } from "./useSvgExport-DH-FfcqQ.js";
import { t as g } from "./useNestedProp-vPNvh7rV.js";
import { t as ee } from "./useThemeCheck-C43Tcqmk.js";
import { t as te } from "./useTransitions-g_zBREk2.js";
import { t as ne } from "./img-Bnokohej.js";
import { n as re } from "./Title-BE3qg9xl.js";
import { t as ie } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { t as ae } from "./useUserOptionState-DK-_1ddE.js";
import { t as oe } from "./vue_ui_hill-dnltu0L-.js";
import { Fragment as _, computed as v, createBlock as se, createCommentVNode as y, createElementBlock as b, createElementVNode as x, createSlots as ce, createVNode as le, defineAsyncComponent as ue, guardReactiveProps as S, nextTick as de, normalizeClass as C, normalizeProps as w, normalizeStyle as T, onBeforeUnmount as fe, onMounted as pe, openBlock as E, ref as D, renderList as me, renderSlot as O, shallowRef as he, toDisplayString as k, unref as A, useTemplateRef as ge, watch as _e, withCtx as j, withKeys as ve, withModifiers as ye } from "vue";
//#region src/components/vue-ui-hill.vue
var be = /* @__PURE__ */ e({ default: () => mt }), xe = ["id", "data-editing"], Se = {
key: 0,
ref: "chartTitle",
style: "width:100%;background:transparent;padding-bottom:24px"
}, Ce = {
key: 3,
class: "vue-ui-hill__toolbar",
"data-dom-to-png-ignore": ""
}, we = ["viewBox"], Te = ["width", "height"], Ee = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], De = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], Oe = [
"d",
"stroke",
"stroke-width",
"stroke-dasharray"
], ke = {
key: 0,
"pointer-events": "none"
}, Ae = [
"d",
"stroke",
"stroke-width",
"stroke-dasharray"
], je = [
"cx",
"cy",
"r",
"fill",
"stroke",
"stroke-width"
], Me = [
"transform",
"font-size",
"fill",
"stroke"
], Ne = [
"transform",
"data-datapoint-index",
"data-datapoint-id",
"tabindex",
"aria-valuenow",
"aria-valuetext",
"aria-label",
"onFocus",
"onBlur",
"onKeydown",
"onPointerenter",
"onPointerleave",
"onClick"
], Pe = ["r", "onPointerdown"], Fe = [
"r",
"fill",
"stroke",
"stroke-width"
], Ie = ["stroke", "stroke-width"], Le = ["d"], Re = [
"x",
"y",
"text-anchor",
"fill",
"font-size",
"font-weight",
"stroke",
"stroke-width"
], ze = [
"transform",
"tabindex",
"aria-label",
"aria-expanded",
"onClick",
"onFocus",
"onKeydown"
], Be = {
key: 0,
class: "vue-ui-hill__stack-overflow-collapse-ghosts",
"pointer-events": "none",
"aria-hidden": "true"
}, Ve = [
"cx",
"cy",
"r",
"fill",
"stroke",
"stroke-width"
], He = ["from", "dur"], Ue = ["from", "dur"], We = [
"from",
"to",
"dur"
], Ge = ["dur"], Ke = ["r"], qe = [
"x",
"y",
"width",
"height",
"fill",
"stroke",
"stroke-width"
], Je = ["stroke", "stroke-width"], Ye = ["d"], Xe = [
"y",
"fill",
"font-size",
"font-weight",
"stroke"
], Ze = [
"x",
"y",
"fill",
"font-size",
"font-weight",
"letter-spacing"
], Qe = [
"x",
"y",
"fill",
"font-size",
"font-weight",
"letter-spacing"
], $e = [
"x",
"y",
"rx",
"width",
"height",
"fill"
], et = ["id"], tt = [
"x",
"y",
"width",
"height",
"rx",
"ry"
], nt = ["clip-path"], rt = [
"width",
"x",
"y",
"fill",
"height",
"onPointerenter",
"onPointerleave"
], it = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], at = [
"x",
"y",
"width",
"height",
"rx",
"ry",
"stroke",
"stroke-width"
], ot = [
"x",
"y",
"fill",
"font-size"
], st = ["aria-label", "onKeydown"], ct = {
key: 0,
class: "vue-ui-hill__stack-overflow-menu-title"
}, lt = [
"disabled",
"aria-label",
"onClick"
], ut = { class: "vue-ui-hill__stack-overflow-menu-label" }, dt = { class: "vue-ui-hill__stack-overflow-menu-value" }, ft = {
key: 6,
class: "vue-data-ui-watermark"
}, pt = {
key: 7,
class: "vue-ui-hill__loading",
"data-dom-to-png-ignore": ""
}, mt = /*#__PURE__*/ ie({
__name: "vue-ui-hill",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: [
"edit",
"save",
"cancel",
"copyAlt",
"change",
"dragStart",
"dragEnd",
"datapointEnter",
"datapointLeave",
"selectDatapoint"
],
setup(e, { expose: ie, emit: be }) {
let mt = ue(() => import("./HillActions-BD9j_sOU.js")), ht = ue(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), gt = ue(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), _t = ue(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), vt = ue(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), { vue_ui_hill: yt } = p(), { isThemeValid: bt, warnInvalidTheme: xt } = ee(), St = e, Ct = D(c()), wt = he(null), Tt = ge("hillChartRef"), M = ge("svgRef"), Et = ge("overflowMenuRef"), Dt = ge("userOptionsRef"), Ot = D(!1), kt = D(!1), At = D(0), jt = be;
function Mt() {
let e = g({
userConfig: St.config,
defaultConfig: yt
}), t = {}, n = e.theme;
if (!n) t = e;
else if (!bt.value(e)) xt(e), t = e;
else {
let i = g({
userConfig: oe[n] || St.config,
defaultConfig: e
});
t = {
...g({
userConfig: St.config,
defaultConfig: i
}),
customPalette: e.customPalette.length ? e.customPalette : r[n] || Xt
};
}
return t;
}
let N = D(Mt());
d({
config: () => N.value,
dataset: () => St.dataset,
component: "VueUiHill",
rules: [f.emptyArray, f.noHint]
});
let { transitionEnabled: Nt } = te({
config: () => N.value.transitions,
dataset: () => St.dataset
}), { userOptionsVisible: Pt, setUserOptionsVisibility: Ft, keepUserOptionState: It } = ae({ config: N.value });
function Lt() {
Ft(!0);
}
function Rt() {
Ft(!1), Jn.value = null, Q.value = null, qn.value = null;
}
let { isPrinting: zt, isImaging: Bt, generatePdf: Vt, generateImage: Ht } = m({
elementId: `hill_${Ct.value}`,
fileName: N.value.style.chart.title.text || "vue-ui-hill",
options: N.value.userOptions.print
}), Ut = v(() => N.value.userOptions.useCursorPointer), Wt = D(0), Gt = D(!1);
function Kt(e) {
Gt.value = e, Wt.value += 1;
}
let qt = D(!1);
function Jt() {
qt.value = !qt.value;
}
let Yt = v(() => N.value.userOptions.position === "left" ? "right" : "left");
_e(() => St.config, () => {
wt.value = null, N.value = Mt(), Wt.value += 1, P.value !== N.value.editing && (P.value = N.value.editing && !N.value.readonly);
}, { deep: !0 });
let Xt = v(() => {
let e = N.value.customPalette;
return Array.isArray(e) && e.length ? e : i;
});
function Zt(e) {
let t = Number(e);
return Number.isFinite(t) ? Math.min(1, Math.max(0, t)) : 0;
}
function Qt(e) {
if (e <= 0) return "todo";
if (e >= 1) return "done";
let t = .5, n = Math.min(t, Math.max(0, Number(N.value.interaction.peakTolerance) || 0)), r = t - n, i = t + n;
return e >= r && e <= i ? "top" : e < t ? "left" : "right";
}
function $t(e, t) {
let n = e && typeof e == "object" ? e : {}, r = `Item ${t + 1}`, i = String(n.name ?? n.label ?? r), a = Zt(n.position ?? n.value ?? 0);
return {
...n,
id: String(n.id ?? `${i}-${t}`),
name: i,
label: String(n.label ?? i),
position: a,
color: n.color || Xt.value[t % Xt.value.length],
muted: !!n.muted,
disabled: !!n.disabled,
status: Qt(e.position),
labelSide: [
"left",
"right",
"auto"
].includes(n.labelSide) ? n.labelSide : "auto",
__index: t
};
}
let en = v(() => Array.isArray(St.dataset) ? St.dataset.map($t) : []);
function tn(e) {
return e.map((e) => ({ ...e }));
}
function nn(e) {
let { __index: t, ...n } = e;
return Object.prototype.hasOwnProperty.call(n, "value") && (n.value = n.position), n;
}
function rn(e = F.value) {
return e.map(nn);
}
let an = v(() => N.value.editing && !N.value.readonly), P = D(an.value), F = D(tn(en.value)), I = D(null);
_e(en, (e) => {
P.value || (wt.value = null, F.value = tn(e));
}, { deep: !0 });
let L = v(() => !N.value.readonly);
_e(L, (e) => {
e || (I.value = null, wt.value = null, P.value = !1, F.value = tn(en.value));
});
function R(e, t) {
jt(e, t);
let n = N.value.events?.[e];
typeof n == "function" && n(t);
}
let z = v(() => N.value.style.chart), on = v(() => z.value.layout), B = v(() => on.value.hill), V = v(() => on.value.plots), H = v(() => on.value.labels.item), U = v(() => on.value.labels.phases), W = v(() => z.value.toolbar), G = v(() => on.value.stackbar), K = v(() => {
let e = V.value.stacking?.overflow || {}, t = Math.max(0, Number(V.value.radius) || 0);
return {
show: e.show !== !1,
marker: {
radius: Math.max(4, Number(e.marker?.radius) || t),
fill: e.marker.fill,
stroke: e.marker?.stroke || V.value.stroke,
strokeWidth: e.marker.strokeWidth,
color: e.marker.labelColor,
fontSize: e.marker.fontSize,
bold: e.marker?.bold !== !1,
offsetY: e.marker.labelOffsetY
},
hysteresis: t * 1.5,
transitionDuration: Nt.value ? e.transitionDuration : 0,
menu: {
width: Math.max(160, Number(e.menu?.width) || 220),
maxHeight: Math.max(96, Number(e.menu?.maxHeight) || 220),
backgroundColor: e.menu?.backgroundColor || z.value.backgroundColor,
color: e.menu?.color || z.value.color,
borderColor: e.menu?.borderColor || V.value.stroke,
borderRadius: Math.max(0, Number(e.menu?.borderRadius) || 6)
}
};
});
function sn(e, t, n = 1) {
let r = Number(e);
return Number.isFinite(r) ? Math.min(n, Math.max(0, r)) : t;
}
let q = v(() => {
let e = B.value.geometry || {}, t = Math.max(0, Number(z.value.width) || 0), n = Math.max(0, Number(z.value.height) || 0), r = sn(e.horizontalPaddingRatio, .02, .49), i = sn(e.topPaddingRatio, .12, .49), a = sn(e.bottomPaddingRatio, .2, .49), o = sn(e.curvature, .65), s = t * r, c = t / 2, l = t * (1 - r), u = n * i, d = n * (1 - a), f = c - s, p = l - c, m = s + f * o, h = c + p * (1 - o);
return {
startX: s,
centerX: c,
endX: l,
baseY: d,
peakY: u,
width: f + p,
left: [
{
x: s,
y: d
},
{
x: m,
y: d
},
{
x: m,
y: u
},
{
x: c,
y: u
}
],
right: [
{
x: c,
y: u
},
{
x: h,
y: u
},
{
x: h,
y: d
},
{
x: l,
y: d
}
]
};
}), cn = v(() => {
let { left: e, right: t } = q.value;
return [
`M${e[0].x} ${e[0].y}`,
`C${e[1].x} ${e[1].y} ${e[2].x} ${e[2].y} ${e[3].x} ${e[3].y}`,
`C${t[1].x} ${t[1].y} ${t[2].x} ${t[2].y} ${t[3].x} ${t[3].y}`
].join(" ");
});
function ln(e, t, n, r, i) {
let a = 1 - i;
return a ** 3 * e + 3 * a ** 2 * i * t + 3 * a * i ** 2 * n + i ** 3 * r;
}
function un(e, t, n, r, i) {
let a = 1 - i;
return 3 * a ** 2 * (t - e) + 6 * a * i * (n - t) + 3 * i ** 2 * (r - n);
}
function dn(e) {
let t = Zt(e), { startX: n, centerX: r, endX: i, left: a, right: o } = q.value, s = n + (t - 0) / 1 * (i - n), c = s <= r ? a : o, l = 0, u = 1;
for (let e = 0; e < 28; e += 1) {
let e = (l + u) / 2;
ln(c[0].x, c[1].x, c[2].x, c[3].x, e) < s ? l = e : u = e;
}
let d = (l + u) / 2, f = ln(c[0].y, c[1].y, c[2].y, c[3].y, d), p = un(c[0].x, c[1].x, c[2].x, c[3].x, d), m = un(c[0].y, c[1].y, c[2].y, c[3].y, d), h = Math.hypot(p, m) || 1;
return {
x: s,
y: f,
normalX: m / h,
normalY: -p / h
};
}
function fn(e) {
let t = Number(V.value.stacking.overlapThresholdRatio);
return e * (2 - (Number.isFinite(t) ? Math.min(2, Math.max(0, t)) : .5));
}
function pn(e, t) {
let n = /* @__PURE__ */ new Map(), r = V.value.stacking;
if (e.forEach((e) => {
n.set(e.id, {
position: e.position,
index: 0,
size: 1,
stackId: `stack:${e.id}`
});
}), !r.show || e.length < 2 || t <= 0) return n;
let i = fn(t), a = e.map((e, t) => ({
datapoint: e,
index: t,
point: dn(e.position)
})).sort((e, t) => e.point.x - t.point.x || e.datapoint.position - t.datapoint.position || e.index - t.index), o = 0;
for (; o < a.length;) {
let e = [a[o]], t = o + 1;
for (; t < a.length;) {
let n = e[e.length - 1], r = a[t];
if (Math.hypot(r.point.x - n.point.x, r.point.y - n.point.y) >= i) break;
e.push(r), t += 1;
}
if (e.length > 1) {
let t = e[0].datapoint.position, r = `stack:${e.map(({ datapoint: e }) => e.id).sort().join("|")}`;
e.forEach(({ datapoint: i }, a) => {
n.set(i.id, {
position: t,
index: a,
size: e.length,
stackId: r
});
});
}
o = t;
}
return n;
}
function mn(e) {
let t = e + Math.max(0, Number(V.value.strokeWidth) || 0) / 2, n = V.value.stacking.gap ?? e / 2;
return t * 2 + n;
}
let hn = D(null), J = D(null), Y = D(null), gn = D(null), _n = D(null), vn = /* @__PURE__ */ new Set(), yn = null, X = null, Z = null;
function bn(e) {
let t = Math.max(0, Number(V.value.strokeWidth) || 0), n = V.value.shadow.show ? Math.max(0, Number(V.value.shadow.blur) || 0) + Math.max(0, -(Number(V.value.shadow.offsetY) || 0)) : 0;
return e + t / 2 + n;
}
function xn(e, t, n) {
if (t <= 1) return e - bn(n);
let r = mn(n);
return e - (t - 1) * r - bn(n);
}
function Sn(e, t, n, r) {
if (n <= 1) return vn.delete(e), !1;
let i = xn(t, n, r), a = vn.has(e), o = K.value.hysteresis, s = a ? i < o : i < 0;
return s ? vn.add(e) : vn.delete(e), s;
}
let Cn = v(() => {
let e = Math.max(0, Number(V.value.radius) || 0), t = mn(e), n = pn(F.value, e), r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), a = [], o = /* @__PURE__ */ new Set(), s = I.value?.id ?? null;
K.value.show || vn.clear(), F.value.forEach((e) => {
let t = n.get(e.id) || {
position: e.position,
index: 0,
size: 1,
stackId: `stack:${e.id}`
};
r.has(t.stackId) || r.set(t.stackId, []), r.get(t.stackId).push({
datapoint: e,
stack: t
});
});
let c = new Set(r.keys());
return vn.forEach((e) => {
c.has(e) || vn.delete(e);
}), r.forEach((n, r) => {
let c = [...n].sort((e, t) => e.stack.index - t.stack.index || e.datapoint.__index - t.datapoint.__index), l = c.reduce((e, t) => e + (Number(t.datapoint.position) || 0), 0) / c.length, u = dn(l);
if (!(K.value.show && Sn(r, u.y, c.length, e))) {
c.forEach((e) => {
i.set(e.datapoint.id, {
hidden: !1,
displayIndex: e.stack.index,
stackId: r,
stackSize: c.length,
promotedFromOverflow: !1,
renderPosition: e.stack.position
});
});
return;
}
c.forEach(({ datapoint: e }) => {
o.add(e.id);
});
let d = s ? c.find(({ datapoint: e }) => e.id === s) : null, f = c.find(({ datapoint: e }) => e.id === hn.value), p = d || f || null, m = p ? c.filter(({ datapoint: e }) => e.id !== p.datapoint.id) : c, h = J.value, g = !!(f && h?.datapointId === f.datapoint.id && !h.moved), ee = m.length ? g ? l : m.reduce((e, t) => e + (Number(t.datapoint.position) || 0), 0) / m.length : l, te = dn(ee);
c.forEach((e) => {
let t = p?.datapoint.id === e.datapoint.id, n = t && f?.datapoint.id === e.datapoint.id;
i.set(e.datapoint.id, {
hidden: !t,
displayIndex: +!!t,
stackId: r,
stackSize: c.length,
promotedFromOverflow: n,
renderPosition: ee
});
}), m.length && a.push({
stackId: r,
anchorPosition: ee,
x: te.x,
y: te.y,
hiddenCount: m.length,
hiddenDatapoints: m.map(({ datapoint: e }) => e),
memberIds: c.map(({ datapoint: e }) => e.id),
collapseDatapoints: m.map(({ datapoint: e, stack: n }) => {
let r = dn(n.position);
return {
id: e.id,
color: e.color,
relativeX: r.x - te.x,
relativeY: r.y - n.index * t - te.y
};
})
});
}), {
layoutMap: n,
displayMap: i,
markers: a,
overflowMemberIds: o
};
});
function wn(e) {
let t = En.value.filter((e) => !e.isStackOverflowHidden), n = t.find((t) => t.id === e), r = new Map(t.filter((t) => t.id !== e).map((e) => [e.id, {
x: e.x,
y: e.y
}]));
if (!n || !V.value.stacking.show) return r;
let i = t.filter((e) => Math.abs(e.x - n.x) < .001).sort((e, t) => t.y - e.y || e.datasetIndex - t.datasetIndex);
if (i.length < 2) return r;
let a = mn(Math.max(0, Number(V.value.radius) || 0)), o = Math.max(...i.map((e) => e.y));
return i.filter((t) => t.id !== e).forEach((e, t) => {
r.set(e.id, {
x: n.x,
y: o - t * a
});
}), r;
}
function Tn() {
return new Map(En.value.filter((e) => !e.isStackOverflowHidden).map((e) => [e.id, {
x: e.x,
y: e.y
}]));
}
let En = v(() => {
let e = Math.max(0, Number(V.value.radius) || 0), { layoutMap: t, displayMap: n, markers: r } = Cn.value, i = mn(e), a = I.value, o = a?.stationaryLayout, s = o instanceof Map ? o : wt.value instanceof Map ? wt.value : null, c = null;
if (a && o instanceof Map && V.value.stacking.show && e > 0) {
let t = F.value.find((e) => e.id === a.id);
if (t) {
let n = r.find((e) => e.memberIds.includes(t.id));
if (n) c = {
x: n.x,
y: n.y - i
};
else {
let n = dn(t.position), r = fn(e), s = F.value.filter((e) => e.id !== a.id && o.has(e.id)).map((e) => {
let t = dn(e.position);
return {
datapoint: e,
distance: Math.hypot(t.x - n.x, t.y - n.y)
};
}).filter(({ distance: e }) => e < r).sort((e, t) => e.distance - t.distance)[0];
if (s) {
let e = o.get(s.datapoint.id), t = [...o.values()].filter((t) => Math.abs(t.x - e.x) < .001), n = Math.min(e.y, ...t.map((e) => e.y));
c = {
x: e.x,
y: n - i
};
} else c = n;
}
}
}
return F.value.map((e, r) => {
let o = t.get(e.id) || {
position: e.position,
index: 0,
size: 1,
stackId: `stack:${e.id}`
}, l = n.get(e.id) || {
hidden: !1,
displayIndex: o.index,
stackId: o.stackId,
stackSize: o.size,
renderPosition: o.position
}, d = dn(l.renderPosition ?? o.position), f = e.id !== a?.id && !l.promotedFromOverflow && s instanceof Map ? s.get(e.id) : null, p = e.id === a?.id && c ? c : f || {
x: d.x,
y: d.y - l.displayIndex * i
}, m = e.labelSide === "auto" ? null : e.labelSide, h = u(H.value.autoSideThreshold, .5, 1), g = m || (e.position > h ? "left" : "right"), ee = Math.abs(Number(H.value.offsetX) || 0) + V.value.radius + H.value.fontSize / 2;
return {
...e,
datasetIndex: r,
x: p.x,
y: p.y,
stackId: l.stackId,
stackSize: l.stackSize,
stackDisplayIndex: l.displayIndex,
isStackOverflowHidden: l.hidden,
isPromotedFromStackOverflow: l.promotedFromOverflow,
labelSide: g,
labelX: g === "left" ? -ee : ee,
textAnchor: g === "left" ? "end" : "start"
};
});
});
function Dn(e) {
return F.value.find((t) => t.id === e);
}
function On(e, t) {
let n = Zt(t), r;
F.value = F.value.map((t) => t.id === e ? (r = {
...t,
position: n
}, r) : t), r && (mr(r.id, r.position), R("change", {
datapoint: nn(r),
dataset: rn()
}));
}
function kn(e) {
let t = M.value;
if (!t) return null;
let n = t.getScreenCTM();
if (!n) return null;
let r = t.createSVGPoint();
r.x = e, r.y = 0;
let i = r.matrixTransform(n.inverse()), { startX: a, endX: o } = q.value;
return Zt(0 + (i.x - a) / (o - a) * 1);
}
function An() {
L.value && (Y.value = null, hn.value = null, J.value = null, _n.value = null, sr(), wt.value = null, F.value = tn(en.value), P.value = !0, R("edit", rn()));
}
function jn() {
let e = rn();
Y.value = null, hn.value = null, J.value = null, _n.value = null, sr(), I.value = null, P.value = !1, R("save", e);
}
function Mn() {
Y.value = null, hn.value = null, J.value = null, _n.value = null, sr(), I.value = null, wt.value = null, F.value = tn(en.value), P.value = !1, R("cancel", rn());
}
function Nn(e, t) {
if (!L.value || !P.value || t.disabled) return;
Y.value = null;
let n = e.currentTarget.closest(".vue-ui-hill__datapoint");
n && typeof n.focus == "function" && (n.focus(), Q.value = t.id), e.preventDefault();
let r = wn(t.id), i = J.value?.datapointId === t.id && !J.value?.moved;
if (I.value = {
id: t.id,
pointerId: e.pointerId,
stationaryLayout: r,
startClientX: e.clientX,
hasMoved: !1,
deferPositionUpdate: i
}, M.value?.setPointerCapture(e.pointerId), !i) {
let n = kn(e.clientX);
n !== null && On(t.id, n);
}
let a = Dn(t.id);
a && R("dragStart", nn(a));
}
function Pn(e) {
if (!I.value || I.value.pointerId !== e.pointerId) return;
e.preventDefault();
let t = Math.abs(e.clientX - I.value.startClientX);
if (I.value.deferPositionUpdate && !I.value.hasMoved && t < 3) return;
I.value.hasMoved || (I.value = {
...I.value,
hasMoved: !0
});
let n = kn(e.clientX);
n !== null && On(I.value.id, n);
}
function Fn(e) {
let t = I.value;
if (!t || t.pointerId !== e.pointerId) return;
M.value?.hasPointerCapture(e.pointerId) && M.value.releasePointerCapture(e.pointerId);
let n = e.type === "pointerup" && !t.hasMoved, r = Dn(t.id);
wt.value = Tn(), I.value = null, r && (n && R("selectDatapoint", Rn(r)), R("dragEnd", nn(r)));
}
function In(e, t) {
if (!L.value || !P.value || t.disabled) return;
let n = Math.max(0, Number(N.value.interaction.keyboardStep) || 0), r = null;
switch (e.key) {
case "ArrowLeft":
case "ArrowDown":
r = t.position - n;
break;
case "ArrowRight":
case "ArrowUp":
r = t.position + n;
break;
case "Home":
r = 0;
break;
case "End":
r = 1;
break;
default: return;
}
e.preventDefault();
let i = e.currentTarget;
Q.value = t.id, I.value = {
id: t.id,
pointerId: null,
stationaryLayout: wn(t.id)
}, On(t.id, r), wt.value = Tn(), I.value = null, de(() => {
i?.isConnected && i.focus({ preventScroll: !0 });
});
}
function Ln(e) {
let t = .5, n = Math.max(0, Number(N.value.interaction.peakTolerance) || 0);
return Math.abs(e - t) <= n ? N.value.a11y.translations.topOfHill : e < t ? U.value.left.text : U.value.right.text;
}
function Rn(e) {
return {
datapoint: nn(e),
index: e.__index
};
}
function zn(e) {
Q.value = null, Jn.value = e.id, ![0, 1].includes(e.position) && Q.value !== e.id && Zn(e), R("datapointEnter", Rn(e));
}
function Bn(e) {
Jn.value === e.id && (Jn.value = null), qn.value === e.id && Q.value !== e.id && I.value?.id !== e.id && (qn.value = null), R("datapointLeave", Rn(e));
}
function Vn(e) {
P.value && L.value || R("selectDatapoint", Rn(e));
}
let Hn = v(() => {
let e = z.value;
return {
width: "100%",
maxWidth: "100%",
color: e.color,
backgroundColor: e.backgroundColor,
fontFamily: N.value.style.fontFamily,
"--vue-ui-hill-button-hover-border": W.value.buttons.hoverBorderColor,
"--vue-ui-hill-button-active-offset": `${W.value.buttons.activeTranslateY}px`
};
}), Un = v(() => ({
color: W.value.status.color,
fontSize: `${W.value.status.fontSize}px`,
fontWeight: W.value.status.bold ? "bold" : "normal",
lineHeight: W.value.status.lineHeight
}));
v(() => ({
color: z.value.title.color,
fontSize: `${z.value.title.fontSize}px`,
fontWeight: z.value.title.bold ? "bold" : "normal",
textAlign: z.value.title.textAlign
})), v(() => ({
color: z.value.title.subtitle.color,
fontSize: `${z.value.title.subtitle.fontSize}px`,
fontWeight: z.value.title.subtitle.bold ? "bold" : "normal"
}));
let Wn = v(() => {
let e = Math.max(0, Number(z.value.height) || 0);
return Math.min(e, q.value.baseY + e) + U.value.offsetY;
});
function Gn(e) {
return U.value[e].text;
}
function Kn(e) {
return e.position === 0 || e.position === 1;
}
let qn = D(null), Jn = D(null), Q = D(null);
function Yn(e) {
Q.value = e.id;
}
function Xn(e) {
Q.value === e.id && (Q.value = null), qn.value === e.id && Jn.value !== e.id && I.value?.id !== e.id && (qn.value = null);
}
function Zn(e) {
e?.id && (qn.value = e.id);
}
let Qn = v(() => {
let e = [], t = [], n = null;
return En.value.forEach((r) => {
if (!r.isStackOverflowHidden) {
if (r.id === qn.value) {
n = r;
return;
}
Kn(r) ? e.push(r) : t.push(r);
}
}), [
...e,
...t,
...n ? [n] : []
];
}), $n = v(() => Cn.value.markers), er = v(() => $n.value.find((e) => e.stackId === Y.value) || null), tr = v(() => {
let e = Math.max(160, Number(K.value.menu.width) || 220), t = Math.max(80, Number(K.value.menu.maxHeight) || 220);
return {
visibility: gn.value ? "visible" : "hidden",
width: "max-content",
minWidth: `${e}px`,
maxWidth: "calc(100% - 16px)",
maxHeight: `${t}px`,
backgroundColor: K.value.menu.backgroundColor,
color: K.value.menu.color,
borderColor: K.value.menu.borderColor,
borderRadius: `${K.value.menu.borderRadius}px`
};
});
function nr(e, t) {
let n = M.value, r = Tt.value;
if (!n || !r) return null;
let i = n.getScreenCTM();
if (!i) return null;
let a = n.createSVGPoint();
a.x = e, a.y = t;
let o = a.matrixTransform(i), s = r.getBoundingClientRect();
return {
x: o.x - s.left,
y: o.y - s.top
};
}
function rr() {
let e = er.value, t = Et.value, n = Tt.value;
if (!e || !t || !n) {
gn.value = null;
return;
}
let r = nr(e.x, e.y), i = nr(e.x, e.y + K.value.marker.radius);
if (!r || !i) {
gn.value = null;
return;
}
let a = n.getBoundingClientRect(), o = t.offsetWidth, s = t.offsetHeight, c = Math.abs(i.y - r.y), l = Math.max(0, a.width - 16), u = Math.min(o, l), d = r.x;
if (u >= l) d = a.width / 2;
else {
let e = u / 2;
d = Math.min(a.width - 8 - e, Math.max(8 + e, r.x));
}
let f = r.y + c + 8, p = r.y - c - 8 - s, m = f + s <= a.height - 8, h = p >= 8, g = f;
!m && h ? g = p : m || (g = Math.min(Math.max(8, f), Math.max(8, a.height - s - 8))), gn.value = {
left: `${d}px`,
top: `${g}px`,
transform: "translateX(-50%)",
visibility: "visible"
};
}
function ir() {
typeof window > "u" || (Z !== null && window.cancelAnimationFrame(Z), Z = window.requestAnimationFrame(() => {
Z = null, rr();
}));
}
_e($n, (e) => {
Y.value && !e.some((e) => e.stackId === Y.value) && or();
}), _e(() => {
let e = er.value;
return e ? [
e.stackId,
e.x,
e.y,
e.hiddenDatapoints.length,
e.hiddenDatapoints.map((e) => `${e.id}:${e.label}:${e.position}`).join("|"),
K.value.marker.radius,
K.value.menu.width,
K.value.menu.maxHeight,
K.value.menu.backgroundColor,
K.value.menu.color,
K.value.menu.borderColor,
K.value.menu.borderRadius,
Gt.value
] : null;
}, (e) => {
if (!e) {
gn.value = null;
return;
}
de(ir);
}, { flush: "post" }), _e(Et, (e, t) => {
t && X && X.unobserve(t), e && X && (X.observe(e), de(ir));
}, { flush: "post" }), _e(() => {
let e = hn.value;
return !e || Cn.value.overflowMemberIds.has(e);
}, (e) => {
e || (hn.value = null, J.value = null);
});
function ar(e) {
if (e) {
if (Y.value === e.stackId) {
ir();
return;
}
gn.value = null, Y.value = e.stackId, de(ir);
}
}
function or() {
Y.value = null, gn.value = null, typeof window < "u" && Z !== null && (window.cancelAnimationFrame(Z), Z = null);
}
function sr() {
yn !== null && (clearTimeout(yn), yn = null);
}
function cr() {
let e = J.value;
!e || e.moved || (sr(), _n.value = e.stackId, hn.value = null, J.value = null, or(), yn = setTimeout(() => {
_n.value = null, yn = null;
}, K.value.transitionDuration + 80));
}
function lr(e) {
if (!(e instanceof Element)) return {
isMenu: !1,
isMarker: !1,
isSelectedDatapoint: !1
};
let t = J.value, n = e.closest("[data-datapoint-id]");
return {
isMenu: !!e.closest("[data-stack-overflow-menu]"),
isMarker: !!e.closest("[data-stack-overflow-marker]"),
isSelectedDatapoint: !!(t && n?.getAttribute("data-datapoint-id") === t.datapointId)
};
}
function ur(e) {
let t = lr(e.target);
Y.value && !t.isMenu && !t.isMarker && or(), J.value && !J.value.moved && !t.isMenu && !t.isMarker && !t.isSelectedDatapoint && cr();
}
function dr(e) {
let t = En.value.find((t) => t.id === e);
if (!t || t.isStackOverflowHidden) return;
let n = M.value?.querySelector(`[data-datapoint-index="${t.__index}"]`);
n && typeof n.focus == "function" && n.focus({ preventScroll: !0 });
}
function fr(e) {
if (!e || e.disabled || N.value.readonly) return;
let t = er.value?.stackId;
t && (sr(), _n.value = null, hn.value = e.id, J.value = {
datapointId: e.id,
stackId: t,
initialPosition: e.position,
moved: !1
}, or(), de(() => {
dr(e.id);
let t = En.value.find((t) => t.id === e.id);
t && R("selectDatapoint", Rn(t));
}));
}
function pr() {
let e = Math.max(1, Number(q.value.width) || 1);
return Math.max(1e-6, 1 / e * 2);
}
function mr(e, t) {
let n = J.value;
!n || n.datapointId !== e || n.moved || Math.abs(t - n.initialPosition) >= pr() && (J.value = {
...n,
moved: !0
});
}
pe(() => {
document.addEventListener("pointerdown", ur), window.addEventListener("resize", ir, { passive: !0 }), typeof ResizeObserver < "u" && (X = new ResizeObserver(() => {
er.value && ir();
}), Tt.value && X.observe(Tt.value), M.value && X.observe(M.value));
}), fe(() => {
document.removeEventListener("pointerdown", ur), window.removeEventListener("resize", ir), X?.disconnect(), X = null, Z !== null && (window.cancelAnimationFrame(Z), Z = null), sr();
});
function hr(e) {
return I.value ? I.value.id === e.id : Jn.value === e.id || Q.value === e.id;
}
function gr(e) {
return s(N.value.style.chart.layout.plots.dragMarker.positionIndicator.value.formatter, e.position, a({
p: "",
v: e.position * 100,
s: "%",
r: N.value.style.chart.layout.plots.dragMarker.positionIndicator.value.rounding
}));
}
function _r(e) {
if (e?.stage === "start") {
kt.value = !0;
return;
}
if (e?.stage === "end") {
kt.value = !1;
return;
}
Ht();
}
let vr = v(() => N.value.style.chart.backgroundColor), yr = v(() => N.value.style.chart.legend), br = v(() => N.value.style.chart.title), { exportSvg: xr, getSvg: Sr } = h({
svg: M,
title: br,
legend: yr,
legendItems: null,
backgroundColor: vr
});
async function Cr({ isCb: e }) {
Ot.value = !0, await de();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await Sr();
await Promise.resolve(N.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(xr());
} finally {
Ot.value = !1;
}
}
function wr(e = null) {
de(() => {
let r = rn().map((e) => [
[e.name],
[e.position],
[gr(e)],
[Ln(e.position)]
]), i = [
[N.value.style.chart.title.text],
[N.value.style.chart.title.subtitle.text],
[
["Name"],
["Position"],
["Percentage"],
["Phase"]
]
].concat(r), a = n(i);
e ? e(a) : t({
csvContent: a,
title: N.value.style.chart.title.text || "vue-ui-hill"
});
});
}
let Tr = v(() => N.value.style.chart.layout.stackbar.show), Er = v(() => {
let e = En.value.length;
En.value.reduce((e, t) => e + (t?.position ?? 0), 0);
let t = 0, n = En.value.every((e) => e.position === 1);
return En.value.toSorted((e, t) => {
if (n) return e.__index - t.__index;
let r = (e?.position ?? 0) - (t?.position ?? 0);
return r === 0 ? e.__index - t.__index : r;
}).map((n) => {
let r = n?.position ?? 0, i = e > 0 ? r / e : 0, a = {
...n,
proportion: i,
proportionStart: t
};
return t += i, a;
});
}), $ = v(() => Math.min(1, Math.max(0, Er.value.reduce((e, t) => e + t.proportion, 0)))), Dr = v(() => $.value * 100), Or = v(() => q.value.left[0].x + q.value.width * $.value), kr = v(() => z.value.height + 32 + G.value.paddingTop);
function Ar() {
return s(G.value.label.formatter, Dr.value, a({
p: "",
v: Dr.value,
s: "%",
r: 0
}));
}
let jr = v(() => `${Ct.value}-stackbar-clip`);
async function Mr() {
let e = rn();
if (jt("copyAlt", {
config: N.value,
dataset: e
}), !N.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(N.value.userOptions.callbacks.altCopy({
config: N.value,
dataset: e
}));
}
async function Nr({ scale: e = 2 } = {}) {
if (!Tt.value) return;
let { width: t, height: n } = Tt.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await ne({
domElement: Tt.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: N.value.style.chart.title.text,
width: t,
height: n,
aspectRatio: r
};
}
function Pr() {
return rn();
}
return ie({
isEditing: P,
beginEditing: An,
save: jn,
cancel: Mn,
getData: Pr,
copyAlt: Mr,
toggleFullscreen: Kt,
toggleAnnotator: Jt,
generateImage: Ht,
generateSvg: Cr,
generatePdf: Vt,
generateCsv: wr,
getImage: Nr
}), (e, t) => (E(), b("div", {
ref_key: "hillChartRef",
ref: Tt,
class: C("vue-data-ui-component vue-ui-hill"),
style: T(Hn.value),
id: `hill_${Ct.value}`,
onMouseenter: Lt,
onMouseleave: Rt,
"data-editing": P.value
}, [
N.value.style.chart.title.text ? (E(), b("div", Se, [(E(), se(re, {
key: `title_${At.value}`,
config: {
title: {
cy: "hill-div-title",
...N.value.style.chart.title
},
subtitle: {
cy: "hill-div-subtitle",
...N.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : y("", !0),
N.value.userOptions.buttons.annotator && M.value ? (E(), se(A(_t), {
key: 1,
color: N.value.style.chart.color,
backgroundColor: N.value.style.chart.backgroundColor,
active: qt.value,
svgRef: M.value,
isCursorPointer: Ut.value,
onClose: Jt
}, {
"annotator-action-close": j(() => [O(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": j(({ color: t }) => [O(e.$slots, "annotator-action-color", w(S({ color: t })), void 0, !0)]),
"annotator-action-draw": j(({ mode: t }) => [O(e.$slots, "annotator-action-draw", w(S({ mode: t })), void 0, !0)]),
"annotator-action-undo": j(({ disabled: t }) => [O(e.$slots, "annotator-action-undo", w(S({ disabled: t })), void 0, !0)]),
"annotator-action-redo": j(({ disabled: t }) => [O(e.$slots, "annotator-action-redo", w(S({ disabled: t })), void 0, !0)]),
"annotator-action-delete": j(({ disabled: t }) => [O(e.$slots, "annotator-action-delete", w(S({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"color",
"backgroundColor",
"active",
"svgRef",
"isCursorPointer"
])) : y("", !0),
W.value.show ? (E(), se(A(mt), {
key: 2,
"is-editing": P.value,
"is-editable": L.value,
"is-fullscreen": Gt.value,
position: Yt.value,
color: N.value.style.chart.color,
"background-color": N.value.style.chart.backgroundColor,
translations: W.value.buttons.translations,
"is-cursor-pointer": Ut.value,
onUpdate: An,
onCancel: Mn,
onSave: jn
}, {
"hill-edit": j(() => [O(e.$slots, "hill-edit", {}, void 0, !0)]),
"hill-cancel": j(() => [O(e.$slots, "hill-cancel", {}, void 0, !0)]),
"hill-save": j(() => [O(e.$slots, "hill-save", {}, void 0, !0)]),
_: 3
}, 8, [
"is-editing",
"is-editable",
"is-fullscreen",
"position",
"color",
"background-color",
"translations",
"is-cursor-pointer"
])) : y("", !0),
W.value.show ? (E(), b("div", Ce, [x("p", {
class: "vue-ui-hill__status",
style: T(Un.value),
"aria-live": "polite"
}, k(P.value ? W.value.status.editInstruction : W.value.status.lastUpdated), 5)])) : y("", !0),
N.value.userOptions.show && (A(It) || A(Pt)) ? (E(), se(A(ht), {
ref_key: "userOptionsRef",
ref: Dt,
key: `uo_${Wt.value}`,
backgroundColor: N.value.style.chart.backgroundColor,
color: N.value.style.chart.color,
isPrinting: A(zt),
isImaging: A(Bt),
uid: Ct.value,
hasTooltip: !1,
hasPdf: N.value.userOptions.buttons.pdf,
hasImg: N.value.userOptions.buttons.img,
hasSvg: N.value.userOptions.buttons.svg,
hasXls: N.value.userOptions.buttons.csv,
hasTable: N.value.userOptions.buttons.table,
hasLabel: N.value.userOptions.buttons.labels,
hasFullscreen: N.value.userOptions.buttons.fullscreen,
hasAltCopy: N.value.userOptions.buttons.altCopy,
chartElement: Tt.value,
position: N.value.userOptions.position,
callbacks: N.value.userOptions.callbacks,
titles: { ...N.value.userOptions.buttonTitles },
hasAnnotator: N.value.userOptions.buttons.annotator,
isAnnotation: qt.value,
printScale: N.value.userOptions.print.scale,
isCursorPointer: Ut.value,
onToggleFullscreen: Kt,
onGeneratePdf: A(Vt),
onGenerateCsv: wr,
onGenerateImage: _r,
onGenerateSvg: Cr,
onToggleAnnotator: Jt,
onCopyAlt: Mr,
style: T({ visibility: A(It) ? A(Pt) ? "visible" : "hidden" : "visible" })
}, ce({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: j(({ isOpen: t, color: n }) => [O(e.$slots, "menuIcon", w(S({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: j(() => [O(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: j(() => [O(e.$slots, "optionCsv", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: j(() => [O(e.$slots, "optionImg", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: j(() => [O(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: j(({ toggleFullscreen: t, isFullscreen: n }) => [O(e.$slots, "optionFullscreen", w(S({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: j(({ toggleAnnotator: t, isAnnotator: n }) => [O(e.$slots, "optionAnnotator", w(S({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "6"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: j(({ altCopy: t }) => [O(e.$slots, "optionAltCopy", w(S({ altCopy: t })), void 0, !0)]),
key: "7"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: j(() => [O(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "8"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: j(() => [O(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "9"
} : void 0
]), 1032, [
"backgroundColor",
"color",
"isPrinting",
"isImaging",
"uid",
"hasPdf",
"hasImg",
"hasSvg",
"hasXls",
"hasTable",
"hasLabel",
"hasFullscreen",
"hasAltCopy",
"chartElement",
"position",
"callbacks",
"titles",
"hasAnnotator",
"isAnnotation",
"printScale",
"isCursorPointer",
"onGeneratePdf",
"style"
])) : y("", !0),
(E(), b("svg", {
ref_key: "svgRef",
ref: M,
style: T({
background: "transparent",
color: N.value.style.chart.color,
fontFamily: N.value.style.fontFamily
}),
class: C({ "vue-data-ui-no-transition": !A(Nt) }),
viewBox: `0 0 ${z.value.width} ${z.value.height + (Tr.value ? 32 + G.value.paddingTop + G.value.paddingBottom + G.value.height : 0)}`,
role: "group",
"aria-live": "polite",
preserveAspectRatio: "xMidYMid meet",
onPointermove: Pn,
onPointerup: Fn,
onPointercancel: Fn
}, [
le(A(gt)),
e.$slots["chart-background"] ? (E(), b("foreignObject", {
key: 0,
x: 0,
y: 0,
width: Math.max(.1, z.value.width),
height: Math.max(.1, z.value.height + (Tr.value ? 32 + G.value.paddingTop + G.value.paddingBottom + G.value.height : 0)),
style: { pointerEvents: "none" }
}, [O(e.$slots, "chart-background", {}, void 0, !0)], 8, Te)) : y("", !0),
B.value.baseline.show ? (E(), b("line", {
key: 1,
x1: q.value.startX,
x2: q.value.endX,
y1: q.value.baseY,
y2: q.value.baseY,
stroke: B.value.baseline.stroke,
"stroke-width": B.value.baseline.strokeWidth,
"stroke-dasharray": B.value.baseline.strokeDasharray,
"vector-effect": "non-scaling-stroke"
}, null, 8, Ee)) : y("", !0),
B.value.midline.show ? (E(), b("line", {
key: 2,
x1: q.value.centerX,
x2: q.value.centerX,
y1: q.value.peakY,
y2: q.value.baseY,
stroke: B.value.midline.stroke,
"stroke-width": B.value.midline.strokeWidth,
"stroke-dasharray": B.value.midline.strokeDasharray,
"vector-effect": "non-scaling-stroke"
}, null, 8, De)) : y("", !0),
x("path", {
d: cn.value,
fill: "none",
stroke: B.value.curve.stroke,
"stroke-width": B.value.curve.strokeWidth,
"stroke-dasharray": B.value.curve.strokeDasharray,
"stroke-linecap": "round",
"stroke-linejoin": "round",
"vector-effect": "non-scaling-stroke"
}, null, 8, Oe),
N.value.style.chart.layout.plots.dragMarker.positionIndicator.show ? (E(!0), b(_, { key: 3 }, me(Qn.value, (e) => (E(), b("g", { key: `position-indicator-${e.id}` }, [hr(e) && V.value.dragMarker.show ? (E(), b("g", ke, [
x("path", {
d: `M${e.x},${e.y} ${e.x},${q.value.baseY}`,
stroke: N.value.style.chart.layout.plots.dragMarker.positionIndicator.useSerieColor ? e.color : N.value.style.chart.layout.plots.dragMarker.positionIndicator.color,
"stroke-width": N.value.style.chart.layout.plots.dragMarker.positionIndicator.strokeWidth,
"stroke-dasharray": N.value.style.chart.layout.plots.dragMarker.positionIndicator.strokeDasharray,
"stroke-linecap": "round",
"vector-effect": "non-scaling-stroke",
class: C({ "vue-data-ui-transition": A(Nt) && I.value?.id !== e.id })
}, null, 10, Ae),
N.value.style.chart.layout.plots.dragMarker.positionIndicator.circle.show ? (E(), b("circle", {
key: 0,
cx: e.x,
cy: q.value.baseY,
r: N.value.style.chart.layout.plots.dragMarker.positionIndicator.circle.radius,
fill: N.value.style.chart.layout.plots.dragMarker.positionIndicator.useSerieColor ? e.color : N.value.style.chart.layout.plots.dragMarker.positionIndicator.color,
stroke: N.value.style.chart.layout.plots.dragMarker.positionIndicator.circle.stroke,
"stroke-width": N.value.style.chart.layout.plots.dragMarker.positionIndicator.circle.strokeWidth,
"vector-effect": "non-scaling-stroke",
"paint-order": "stroke fill",
class: C({ "vue-data-ui-transition": A(Nt) && I.value?.id !== e.id })
}, null, 10, je)) : y("", !0),
N.value.style.chart.layout.plots.dragMarker.positionIndicator.value.show ? (E(), b("text", {
key: 1,
"paint-order": "stroke fill",
"vector-effect": "non-scaling-stroke",
"text-anchor": "middle",
transform: `translate(${e.x}, ${q.value.baseY + N.value.style.chart.layout.plots.radius + N.value.style.chart.layout.plots.dragMarker.positionIndicator.value.offsetY + N.value.style.chart.layout.plots.dragMarker.positionIndicator.value.fontSize})`,
"font-size": N.value.style.chart.layout.plots.dragMarker.positionIndicator.value.fontSize,
fill: N.value.style.chart.layout.plots.dragMarker.positionIndicator.value.useSerieColor ? e.color : N.value.style.chart.layout.plots.dragMarker.positionIndicator.value.color,
stroke: N.value.style.chart.backgroundColor,
"stroke-width": "1",
class: C({ "vue-data-ui-transition": A(Nt) && I.value?.id !== e.id })
}, k(gr(e)), 11, Me)) : y("", !0)
])) : y("", !0)]))), 128)) : y("", !0),
(E(!0), b(_, null, me(Qn.value, (e) => (E(), b("g", {
key: e.id,
"data-cy-datapoint": "",
class: C({
"vue-ui-hill__datapoint": !0,
"vue-data-ui-transition": A(Nt) && I.value?.id !== e.id,
"vue-ui-hill__datapoint--promoted": A(Nt) && e.isPromotedFromStackOverflow
}),
style: T({ opacity: [0, 1].includes(e.position) || e?.muted ? V.value.mutedOpacity : e?.disabled ? V.value.disabledOpacity : 1 }),
transform: `translate(${e.x} ${e.y})`,
"data-datapoint-index": e.__index,
"data-datapoint-id": e.id,
role: "slider",
tabindex: P.value && L.value && !e.disabled ? 0 : -1,
"aria-orientation": "horizontal",
"aria-valuemin": "0",
"aria-valuemax": "100",
"aria-valuenow": gr(e),
"aria-valuetext": `${e.label}: ${Ln(e.position)}, ${gr(e)}`,
"aria-label": e.label,
onFocus: (t) => Yn(e),
onBlur: (t) => Xn(e),
onKeydown: (t) => In(t, e),
onPointerenter: (t) => zn(e),
onPointerleave: (t) => Bn(e),
onClick: (t) => Vn(e)
}, [
x("circle", {
r: V.value.hitRadius,
fill: "transparent",
class: C({
"vue-ui-hill__hit-area--active": P.value && L.value && !e.disabled,
"vue-ui-hill__hit-area--dragging": I.value?.id === e.id
}),
onPointerdown: (t) => Nn(t, e)
}, null, 42, Pe),
x("circle", {
class: "vue-ui-hill-circle",
r: V.value.radius,
fill: e.color,
stroke: V.value.stroke,
"stroke-width": V.value.strokeWidth,
style: T({ filter: V.value.shadow.show ? `drop-shadow(${V.value.shadow.offsetX}px ${V.value.shadow.offsetY}px ${V.value.shadow.blur}px ${V.value.shadow.color})` : "none" }),
"vector-effect": "non-scaling-stroke",
"pointer-events": "none"
}, null, 12, Fe),
P.value && (I.value?.id === e.id && V.value.dragMarker.show || hr(e)) && !e?.disabled ? (E(), b("g", {
key: 0,
fill: "none",
stroke: A(l)(e.color),
"stroke-width": V.value.dragMarker.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
"pointer-events": "none",
"vector-effect": "non-scaling-stroke",
"aria-hidden": "true"
}, [x("path", { d: V.value.dragMarker.crossPath }, null, 8, Le)], 8, Ie)) : y("", !0),
H.value.show ? (E(), b("text", {
key: 1,
x: e.labelX,
y: H.value.offsetY,
"text-anchor": e.textAnchor,
fill: H.value.useSerieColor ? e.color : H.value.color,
"font-size": H.value.fontSize,
"font-weight": H.value.bold ? "bold" : "normal",
"paint-order": "stroke fill",
stroke: H.value.stroke,
"stroke-width": H.value.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
"pointer-events": "none",
style: { "user-select": "none" },
"dominant-baseline": "central"
}, k(A(o)(e.label, H.value.ellipsisThresholdChars)), 9, Re)) : y("", !0)
], 46, Ne))), 128)),
(E(!0), b(_, null, me($n.value, (e) => (E(), b("g", {
key: `stack-overflow-${e.stackId}`,
class: C(["vue-ui-hill__stack-overflow-marker", {
"vue-ui-hill__stack-overflow-marker--animated": A(Nt),
"vue-ui-hill__stack-overflow-marker--restored": _n.value === e.stackId
}]),
style: T({
"--vue-ui-hill-overflow-marker-duration": `${K.value.transitionDuration * .7}ms`,
"--vue-ui-hill-overflow-marker-delay": `${K.value.transitionDuration * .3}ms`,
"--vue-ui-hill-overflow-label-duration": `${K.value.transitionDuration * .55}ms`,
"--vue-ui-hill-overflow-label-delay": `${K.value.transitionDuration * .45}ms`,
cursor: Ut.value && !N.value.readonly ? "pointer" : "default"
}),
transform: `translate(${e.x} ${e.y})`,
"data-stack-overflow-marker": "",
role: "button",
tabindex: P.value && L.value ? 0 : -1,
"aria-label": `${e.hiddenCount} stacked datapoints. Activate to choose one.`,
"aria-expanded": Y.value === e.stackId,
onPointerdown: t[0] ||= ye(() => {}, ["stop"]),
onClick: ye((t) => ar(e), ["stop"]),
onFocus: (t) => ar(e),
onKeydown: [
ve(ye((t) => ar(e), ["prevent", "stop"]), ["enter"]),
ve(ye((t) => ar(e), ["prevent", "stop"]), ["space"]),
ve(ye(or, ["prevent", "stop"]), ["esc"])
]
}, [
A(Nt) && _n.value !== e.stackId ? (E(), b("g", Be, [(E(!0), b(_, null, me(e.collapseDatapoints, (t) => (E(), b("circle", {
key: `overflow-ghost-${e.stackId}-${t.id}`,
cx: t.relativeX,
cy: t.relativeY,
r: V.value.radius,
fill: t.color,
stroke: V.value.stroke,
"stroke-width": V.value.strokeWidth,
opacity: "0.8",
"vector-effect": "non-scaling-stroke"
}, [
x("animate", {
attributeName: "cx",
from: t.rel