@adyen/lume-vue3
Version:
Lume is a Vue data visualization component library, built with Typescript and D3.
3,343 lines • 102 kB
JavaScript
import { defineComponent as Z, ref as S, openBlock as _, createElementBlock as I, mergeProps as j, createElementVNode as G, toDisplayString as ne, createCommentVNode as z, isRef as Gt, computed as v, watch as X, toRefs as ee, inject as Ce, reactive as Fe, onMounted as ye, unref as d, Fragment as Q, renderList as W, createBlock as Y, normalizeClass as te, normalizeStyle as jt, watchEffect as Vt, onBeforeUnmount as Pt, renderSlot as M, createTextVNode as se, useSlots as ue, nextTick as Qe, withCtx as V, createSlots as ce, pushScopeId as sn, popScopeId as cn, provide as Ke, createVNode as re, toHandlers as oe, normalizeProps as pe, guardReactiveProps as he, defineAsyncComponent as Je, resolveDynamicComponent as dn } from "vue";
import { sankeyLinkHorizontal as vn, sankey as fn, sankeyJustify as mn } from "d3-sankey";
import { format as pn, ticks as hn, scaleBand as Be, scaleLinear as Me, link as gn, line as yn, area as _n } from "d3";
import { createPopper as kn } from "@popperjs/core";
const bn = {
class: "axis__tick-label lume-typography--axis",
"pointer-events": "all",
"data-j-axis__tick-label": ""
}, An = /* @__PURE__ */ Z({
__name: "lume-tick",
props: {
value: {
type: [String, Number],
required: !0
},
group: {
type: Object,
required: !0
},
ghost: {
type: Object,
required: !0
},
label: {
type: Object,
required: !0
},
gridline: {
type: Object,
required: !0
},
isHovered: {
type: Boolean,
default: !1
},
isHidden: {
type: Boolean,
default: !1
},
withGridlines: {
type: Boolean,
default: !0
}
},
emits: ["click", "mouseenter"],
setup(e, { expose: n, emit: t }) {
const o = t, a = S(null);
return n({ ref: a }), (u, l) => (_(), I("g", j(e.group, {
class: ["axis__tick", {
"axis__tick--hovered": e.isHovered,
"axis__tick--hidden": e.isHidden
}],
"data-j-axis__tick": "",
onMouseenter: l[0] || (l[0] = (i) => o("mouseenter", i)),
onClick: l[1] || (l[1] = (i) => o("click", i))
}), [
G("g", bn, [
G("rect", j(e.ghost, {
class: "axis__ghost",
fill: "url(#lume-tick-gradient)"
}), null, 16),
G("text", j(e.label, {
ref_key: "labelRef",
ref: a,
class: "axis__label"
}), ne(e.value), 17)
]),
e.withGridlines ? (_(), I("line", j({ key: 0 }, e.gridline, { class: "axis__grid-line" }), null, 16)) : z("", !0)
], 16));
}
}), q = (e, n) => {
const t = e.__vccOpts || e;
for (const [o, a] of n)
t[o] = a;
return t;
}, At = /* @__PURE__ */ q(An, [["__scopeId", "data-v-59ddc0a6"]]), Tn = [
"controls",
"legend",
"axes",
"groups",
"tooltip",
"tooltip-content"
];
function Ct() {
return process.env.NODE_ENV === "production";
}
function Ft(e) {
return (e == null ? void 0 : e.map(
(n) => n.values.map((t) => t == null ? void 0 : t.value).flat()
).flat()) || [];
}
function st(e) {
return e.length === 1;
}
function Ln(e) {
return !!e && e.every(
(n) => "color" in n
);
}
function qe(e) {
return !!e && typeof e == "object" && !Array.isArray(e);
}
function zt(e, n) {
const t = { ...e };
return Object.entries(n).forEach(([o, a]) => {
t[o] = qe(e[o]) && qe(a) ? zt(e[o], a) : a;
}), t;
}
function $n(e) {
return e != null && qe(e) && "value" in e;
}
function de(e) {
return (e == null ? void 0 : e.bandwidth) !== void 0;
}
function On(e) {
return de(e) ? e.step() : Math.max(...e.range()) / Math.max(...e.domain());
}
function In(e) {
const [n, t] = e.domain();
return n == null || t == null || n === 0 && t === 0;
}
const xn = (e, n) => {
if (!e)
throw new Error("Data is not a valid array");
if (e.length === 0)
throw new Error("Cannot get highest value from empty array");
e.some(
({ values: o }) => o.length - 1 >= n
) || ge(ve.IndexExceedsLengthOfDataSets);
};
function wn(e, n) {
var t;
return xn(e, n), ((t = e.reduce(
(o, a) => {
var u, l;
return (((u = o.values[n]) == null ? void 0 : u.value) ?? 0) > (((l = a.values[n]) == null ? void 0 : l.value) ?? 0) ? o : a;
}
).values[n]) == null ? void 0 : t.value) || 0;
}
function Wt(e) {
const n = Gt(e) ? e.value : e;
if (!n)
throw new Error("No empty array can be created from specified data value");
const t = Math.max(
...n.map((o) => o.values.length),
0
);
return Array(t).fill(null);
}
function En(e) {
return de(e) ? e.domain().length : Math.max(...e.domain());
}
function Nn(e, n) {
return (t) => Math.round(e * (1 - t) + n * t);
}
function Dn(e, n, t) {
const o = n, a = e.slice(0, o);
return e.slice(o).concat(a);
}
function Ae(e) {
if (e.groups) {
const n = Object.keys(e);
return Object.assign(
{},
...n.map((t) => t !== "groups" ? { [t]: e[t] } : {})
);
}
return e;
}
function Hn(e) {
return Object.assign(
{},
...Object.keys(e).map(
(n) => Tn.includes(n) ? {} : { [n]: e[n] }
)
);
}
const Bn = (e = 21) => crypto.getRandomValues(new Uint8Array(e)).reduce(
(n, t) => n += (t &= 63) < 36 ? t.toString(36) : t < 62 ? (t - 26).toString(36).toUpperCase() : t > 62 ? "-" : "_",
""
);
function ct(e, n) {
const t = n - e.length;
return t > 0 ? [...e, ...Array(t).fill({ value: null })] : e;
}
var ve = /* @__PURE__ */ ((e) => (e.DatasetLength = `Our guidelines highly recommend not having more than 5 datasets in one chart.
Learn more: https://lume.design/guidelines/datasets`, e.ColorLoop = "Colors will loop around after the 5th dataset. You can prevent this by setting specific colors for your datasets.", e.Empty = "The dataset(s) provided are empty.", e.InvalidFormat = "The string provided to format is invalid. Please refer to https://github.com/d3/d3-format for valid arguments.", e.NotContainedInSvg = "This component is an `SVGElement`, thus it is required to be inside an `<svg>` container.", e.InvalidHoveredIndex = "The provided hovered index is not valid for the data of this chart.", e.InvalidHoveredElement = "The provided hovered element is not valid for the data of this diagram.", e.IndexExceedsLengthOfDataSets = "Index exceeds length of all of the datasets", e))(ve || {});
const Mn = "[lume] ";
function ge(e, n = !0) {
n && Ct() || console.warn(Mn + "Warning: " + e);
}
const Ve = (e) => {
let n = null;
switch (typeof e) {
case "string":
try {
n = pn(e);
} catch {
ge(ve.InvalidFormat), n = null;
}
break;
case "function":
n = e;
break;
default:
n = null;
}
function t(...o) {
return n ? n(...o) : o[0];
}
return t;
}, Re = () => ({
options: {
type: Object,
default: () => ({})
}
});
function fe(e, n) {
return { allOptions: v(() => {
const o = Gt(n) ? n == null ? void 0 : n.value : n;
return o ? zt(o, e.value) : e.value;
}) };
}
const Rn = 0.2;
function Sn(e, n, t) {
const o = S(), a = v(() => Math.max(...e.value.range())), u = v(() => n.value.length);
function l() {
if (!n.value) return;
const c = n.value.reduce(
(m, r) => m + r.ref.getBoundingClientRect().width,
0
), s = Math.ceil(c / u.value);
o.value = s + s * Rn;
}
function i(c) {
if (!n.value) return !0;
const s = t.value.skip, m = n.value.length;
if (c === 0) return !0;
const r = a.value / m, f = typeof s == "number" && s > 0 && s + 1 || Math.ceil(o.value / r);
return c % f === 0;
}
return X(n, l), { showTick: i };
}
const H = {
HORIZONTAL: "horizontal",
VERTICAL: "vertical"
}, Gn = {
SINGLE: "single",
GROUPED: "grouped",
STACKED: "stacked"
}, Zt = "No data", Tt = 20, Ut = 0.33, Xt = 0.5, Yt = 12, Se = 8, jn = 1, Vn = [
"auto",
"auto-start",
"auto-end",
"top",
"top-start",
"top-end",
"right",
"right-start",
"right-end",
"bottom",
"bottom-start",
"bottom-end",
"left",
"left-start",
"left-end"
];
function ze(e) {
e != null && e.closest("svg") || ge(ve.NotContainedInSvg);
}
const Kt = {
/** Displays a line for each tick. */
gridLines: !1,
/** Displays the axis title. */
withTitle: !0,
//
//// Tick settings
//
/** Controls if the tick labels should be displayed. */
showTicks: !0,
/** Amount of ticks to display in the axis. */
tickCount: 10,
/** Formatting string/function for the tick label. */
tickFormat: null,
/** Space between the tick label and the axis line. */
tickPadding: 12
}, Pn = {
...Kt,
withTitle: !1,
skip: !0
}, Cn = {
...Kt,
gridLines: !0
}, Fn = function(e, n, t) {
const o = v(() => e.value.step() * e.value.paddingInner() / 2);
function a(c, s) {
return {
transform: `translate(${(e.value(s) ?? e.value(c)) - o.value}, 0)`
};
}
function u(c) {
var m;
const s = Math.max(
e.value.step(),
(c ? (m = c.getComputedTextLength) == null ? void 0 : m.call(c) : e.value.step()) + 20
);
return {
x: -(s - e.value.step()) / 2,
width: s,
height: t.value.tickPadding + Yt + Se
};
}
function l() {
const c = e.value.step() / 2;
return {
x1: c,
x2: c,
y1: -n.value.height
// Negative height means it goes from bottom to top
};
}
function i() {
return {
x: e.value.step() / 2,
y: t.value.tickPadding,
dy: "0.8em",
"text-anchor": "middle"
};
}
return {
getGridLinesAttributes: l,
getTickGhostAttributes: u,
getTickGroupAttributes: a,
getTickLabelAttributes: i
};
}, zn = function(e, n, t) {
const o = v(() => e.value.step() * e.value.paddingInner() / 2);
function a(c, s) {
return {
transform: `translate(0, ${(e.value(s) ?? e.value(c)) - o.value})`
};
}
function u(c) {
var m;
const s = (c ? (m = c.getComputedTextLength) == null ? void 0 : m.call(c) : 42) + t.value.tickPadding + Se;
return {
x: -s,
width: s,
height: e.value.step()
};
}
function l() {
const c = e.value.step() / 2;
return {
y1: c,
y2: c,
x1: n.value.width
};
}
function i() {
return {
x: -t.value.tickPadding,
y: e.value.step() / 2,
"text-anchor": "end",
"alignment-baseline": "middle"
};
}
return {
getGridLinesAttributes: l,
getTickGhostAttributes: u,
getTickGroupAttributes: a,
getTickLabelAttributes: i
};
}, Wn = function(e, n, t) {
const o = v(() => {
const c = e.value.ticks();
return c.length > 1 ? e.value(c[1]) - e.value(c[0]) : 0;
});
function a(c) {
return {
transform: `translate(${e.value(c)}, 0)`
};
}
function u() {
return {
height: t.value.tickPadding + Yt + Se,
width: o.value,
x: -(o.value / 2)
};
}
function l() {
return {
y1: -n.value.height
};
}
function i() {
return {
y: t.value.tickPadding,
dy: "0.8em",
"text-anchor": "middle"
};
}
return {
getGridLinesAttributes: l,
getTickGhostAttributes: u,
getTickGroupAttributes: a,
getTickLabelAttributes: i
};
}, Zn = function(e, n, t) {
const o = v(() => {
const c = e.value.ticks();
return c.length > 1 ? e.value(c[1]) - e.value(c[0]) : 0;
});
function a(c) {
return {
transform: `translate(0, ${e.value(c)})`
};
}
function u(c) {
var m;
const s = (((m = c == null ? void 0 : c.getComputedTextLength) == null ? void 0 : m.call(c)) || 0) + t.value.tickPadding + Se;
return {
width: s,
height: o.value,
x: -s,
y: -(o.value / 2)
};
}
function l() {
return {
x1: n.value.width
};
}
function i() {
return {
x: -t.value.tickPadding,
dy: "0.4em",
"text-anchor": "end"
};
}
return {
getGridLinesAttributes: l,
getTickGhostAttributes: u,
getTickGroupAttributes: a,
getTickLabelAttributes: i
};
}, Un = {
"x-band-scale-axis": Fn,
"y-band-scale-axis": zn,
"x-linear-scale-axis": Wn,
"y-linear-scale-axis": Zn
}, Xn = ["transform"], Yn = { key: 0 }, Kn = /* @__PURE__ */ G("linearGradient", { id: "lume-tick-gradient" }, [
/* @__PURE__ */ G("stop", {
offset: "0%",
"stop-color": "rgba(255,255,255,0)"
}),
/* @__PURE__ */ G("stop", {
offset: "10%",
"stop-color": "var(--lume-chart-background-color)"
}),
/* @__PURE__ */ G("stop", {
offset: "90%",
"stop-color": "var(--lume-chart-background-color)"
}),
/* @__PURE__ */ G("stop", {
offset: "100%",
"stop-color": "rgba(255,255,255,0)"
})
], -1), Jn = [
Kn
];
var Jt = /* @__PURE__ */ ((e) => (e.bandScale = "band-scale-axis", e.linearScale = "linear-scale-axis", e))(Jt || {}), Qt = /* @__PURE__ */ ((e) => (e.left = "left", e.bottom = "bottom", e))(Qt || {}), et = /* @__PURE__ */ ((e) => (e.x = "bottom", e.y = "left", e))(et || {});
const Lt = /* @__PURE__ */ Z({
__name: "lume-axis",
props: {
scale: {
type: Function,
default: null
},
type: {
type: String,
default: void 0,
validator: (e) => e in et
},
position: {
type: String,
default: void 0,
validator: (e) => e in Qt
},
containerSize: {
type: Object,
default: () => ({ width: 0, height: 0 })
},
hoveredIndex: {
type: Number,
default: -1
},
orientation: {
type: String,
default: H.VERTICAL
},
...Re()
},
emits: ["mouseenter", "click", "mouseleave", "lume__internal--axis-size"],
setup(e, { emit: n }) {
const o = e, a = n, { scale: u, containerSize: l, hoveredIndex: i, options: c, orientation: s } = ee(o), m = Ce("isEmpty", S(!1)), r = Fe({}), f = S(null), y = S(null), p = S(null), b = v(
() => o.type ? et[o.type] : o.position
), $ = v(
() => o.type || (b.value === "left" ? "y" : "x")
), L = v(
() => $.value === "x" && s.value === H.VERTICAL || $.value === "y" && s.value === H.HORIZONTAL
), { allOptions: g } = fe(
c,
$.value === "x" ? Pn : Cn
), { showTick: O } = Sn(u, f, g), N = v(
() => m.value || !u.value || In(u.value)
), D = v(() => {
var k, E, h, R;
return $.value === "y" && N.value ? `translate(0, ${((k = l.value) == null ? void 0 : k.height) / 2})` : $.value === "x" && N.value ? `translate(-${((E = l.value) == null ? void 0 : E.width) / 2}, ${(h = l.value) == null ? void 0 : h.height})` : `translate(0, ${$.value === "x" ? (R = l.value) == null ? void 0 : R.height : 0})`;
}), P = v(() => {
if (!u.value) return [];
if (de(u.value))
return u.value.labels || u.value.domain();
const { tickCount: k } = g.value, [E, h] = u.value.domain();
return hn(E, h, k);
}), w = v(() => {
const { tickFormat: k } = g.value;
return Ve(k);
}), B = v(
() => g.value.withHover && L.value && i.value > -1
), U = v(
() => g.value.tickPadding + Se || 16
), K = v(() => $.value === "x" ? (
// If x axis, get the tick height
Math.max(
...(f.value || []).map(
(k) => {
var E, h;
return ((h = (E = k.ref).getBBox) == null ? void 0 : h.call(E).height) + U.value;
}
)
)
) : (
// If y axis, get the tick width
Math.max(
...(f.value || []).map(
(k) => {
var E, h;
return ((h = (E = k.ref).getBBox) == null ? void 0 : h.call(E).width) + U.value;
}
)
)
));
function J(k) {
const { showTicks: E } = g.value;
return E === !1 ? "" : w.value(k);
}
function C(k, E, h) {
a("mouseenter", { index: L.value ? k : null, value: E, event: h });
}
function ae(k, E, h) {
a("click", { index: k, value: E, event: h });
}
function Ne(k) {
var E;
if (!(!f.value || !f.value.length))
return (E = f.value[k]) == null ? void 0 : E.ref;
}
function me() {
p.value = P.value.map(
(k, E) => ({
value: J(k),
group: r.getTickGroupAttributes(k, E),
ghost: r.getTickGhostAttributes(Ne(E)),
label: r.getTickLabelAttributes(),
gridline: r.getGridLinesAttributes()
})
);
}
function Te() {
p.value && p.value.map((k) => (k.gridline = r.getGridLinesAttributes(), k));
}
function Le() {
if (!u.value) return;
const k = u.value.step ? "bandScale" : "linearScale", E = Un[`${$.value}-${Jt[k]}`];
Object.entries(E(u, l, g) || []).forEach(
([h, R]) => {
r[h] = R;
}
);
}
return X(u, Le, { flush: "sync", immediate: !0 }), X(u, me, { immediate: !0 }), X(f, me), X(K, (k) => a("lume__internal--axis-size", k)), X(o.containerSize, Te), ye(() => ze(y.value)), (k, E) => d(u) ? (_(), I("g", {
key: 0,
ref_key: "root",
ref: y,
class: "axis",
transform: D.value,
"data-j-axis": "",
onMouseleave: E[1] || (E[1] = (h) => a("mouseleave", h))
}, [
$.value === "x" ? (_(), I("defs", Yn, Jn)) : z("", !0),
(_(!0), I(Q, null, W(p.value, (h, R) => (_(), Y(d(At), j({
key: `${h.value}_${R}`,
ref_for: !0,
ref_key: "tickRefs",
ref: f
}, h, {
"is-hidden": d(g).skip && !d(O)(R),
"with-gridlines": d(g).gridLines,
onMouseenter: (F) => C(R, h.value, F),
onClick: (F) => ae(R, h.value, F)
}), null, 16, ["is-hidden", "with-gridlines", "onMouseenter", "onClick"]))), 128)),
B.value ? (_(), Y(d(At), j({ key: 1 }, p.value[d(i)], {
"with-gridlines": !1,
"is-hovered": "",
onClick: E[0] || (E[0] = (h) => ae(
d(i),
p.value[d(i)].value,
h
))
}), null, 16)) : z("", !0)
], 40, Xn)) : z("", !0);
}
});
function Qn(e, n, t, o) {
const a = v(() => t.value > 0 && t.value < 1), u = v(
() => o.value > 0 && o.value < 1
), l = v(
() => a.value ? e.value - 0.5 : e.value
// draws the 1px bar closer to the axis
), i = v(
() => u.value ? n.value - 0.5 : n.value
// draws the 1px bar closer to the axis
);
return { computedX: l, computedY: i, shouldHaveMinWidth: a, shouldHaveMinHeight: u };
}
function qn(e, n, t, o) {
const a = S(0), u = S(0), l = v(() => `${e.value + t.value / 2}px ${n.value + o.value / 2}px`);
return ye(() => {
a.value = t.value, u.value = o.value;
}), X(t, (i) => a.value = i), X(o, (i) => u.value = i), { computedWidth: a, computedHeight: u, transformOrigin: l };
}
const eo = ["x", "y", "width", "height"], to = /* @__PURE__ */ Z({
__name: "lume-bar",
props: {
x: {
type: Number,
default: 0
},
y: {
type: Number,
default: 0
},
width: {
type: Number,
required: !0
},
height: {
type: Number,
required: !0
},
classList: {
type: [String, Array],
default: ""
},
isFaded: {
type: Boolean,
default: !1
},
isNegative: {
type: Boolean,
default: !1
},
transition: {
type: [String, Boolean],
default: !1
}
},
emits: ["click", "mouseover", "mouseleave"],
setup(e, { emit: n }) {
const t = e, o = n, { x: a, y: u, width: l, height: i, transition: c, classList: s } = ee(t), m = S(null), r = v(
() => typeof s.value == "string" ? [s.value] : s.value
), f = v(() => c.value === "width"), y = v(() => c.value === "height"), p = qn(a, u, l, i), { computedX: b, computedY: $, shouldHaveMinWidth: L, shouldHaveMinHeight: g } = Qn(a, u, l, i), O = v(() => L.value ? 1 : (f.value ? p.computedWidth : l).value), N = v(() => g.value ? 1 : (y.value ? p.computedHeight : i).value), D = f.value || y.value ? p.transformOrigin : null;
return ye(() => ze(m.value)), (P, w) => (_(), I("rect", {
ref_key: "root",
ref: m,
class: te(["lume-bar", [
{
"lume-fill--faded": e.isFaded,
"lume-bar--negative": e.isNegative,
"lume-bar--transition-width": f.value,
"lume-bar--transition-height": y.value
},
...r.value
]]),
style: jt({ transformOrigin: d(D) }),
x: d(b),
y: d($),
width: O.value,
height: N.value,
"data-j-bar": "",
onClick: w[0] || (w[0] = (B) => o("click", B)),
onMouseover: w[1] || (w[1] = (B) => o("mouseover", B)),
onMouseleave: w[2] || (w[2] = (B) => o("mouseleave", B))
}, null, 46, eo));
}
}), dt = /* @__PURE__ */ q(to, [["__scopeId", "data-v-8e8f732a"]]);
var ke = /* @__PURE__ */ ((e) => (e.Categorical = "categorical", e.Sequential = "sequential", e.Divergent = "divergent", e))(ke || {}), ie = /* @__PURE__ */ ((e) => (e.Skyblue = "skyblue", e.Royalblue = "royalblue", e.Violet = "violet", e.Darkteal = "darkteal", e.Gold = "gold", e))(ie || {}), qt = /* @__PURE__ */ ((e) => (e.Skyblue10 = "skyblue-10", e.Skyblue20 = "skyblue-20", e.Skyblue30 = "skyblue-30", e.Skyblue40 = "skyblue-40", e.Skyblue50 = "skyblue-50", e.Skyblue60 = "skyblue-60", e.Skyblue70 = "skyblue-70", e.Skyblue80 = "skyblue-80", e.Skyblue90 = "skyblue-90", e.Skyblue100 = "skyblue-100", e.Royalblue10 = "royalblue-10", e.Royalblue20 = "royalblue-20", e.Royalblue30 = "royalblue-30", e.Royalblue40 = "royalblue-40", e.Royalblue50 = "royalblue-50", e.Royalblue60 = "royalblue-60", e.Royalblue70 = "royalblue-70", e.Royalblue80 = "royalblue-80", e.Royalblue90 = "royalblue-90", e.Royalblue100 = "royalblue-100", e.Violet10 = "violet-10", e.Violet20 = "violet-20", e.Violet30 = "violet-30", e.Violet40 = "violet-40", e.Violet50 = "violet-50", e.Violet60 = "violet-60", e.Violet70 = "violet-70", e.Violet80 = "violet-80", e.Violet90 = "violet-90", e.Violet100 = "violet-100", e.Darkteal10 = "darkteal-10", e.Darkteal20 = "darkteal-20", e.Darkteal30 = "darkteal-30", e.Darkteal40 = "darkteal-40", e.Darkteal50 = "darkteal-50", e.Darkteal60 = "darkteal-60", e.Darkteal70 = "darkteal-70", e.Darkteal80 = "darkteal-80", e.Darkteal90 = "darkteal-90", e.Darkteal100 = "darkteal-100", e.Gold10 = "gold-10", e.Gold20 = "gold-20", e.Gold30 = "gold-30", e.Gold40 = "gold-40", e.Gold50 = "gold-50", e.Gold60 = "gold-60", e.Gold70 = "gold-70", e.Gold80 = "gold-80", e.Gold90 = "gold-90", e.Gold100 = "gold-100", e))(qt || {}), vt = /* @__PURE__ */ ((e) => (e.SkyTeal = "skyblue-darkteal", e.VioletRoyal = "violet-royalblue", e.VioletTeal = "violet-darkteal", e.GoldTeal = "gold-darkteal", e.GoldRoyal = "gold-royalblue", e))(vt || {}), ft = /* @__PURE__ */ ((e) => (e.White = "white", e.Black = "black", e.Green = "green", e.Orange = "orange", e.Red = "red", e.Grey = "grey", e.Grey10 = "grey-10", e.Grey20 = "grey-20", e.Grey30 = "grey-30", e.Grey40 = "grey-40", e.Grey50 = "grey-50", e.Grey60 = "grey-60", e.Grey70 = "grey-70", e.Grey80 = "grey-80", e.Grey90 = "grey-90", e.Grey100 = "grey-100", e))(ft || {}), mt = /* @__PURE__ */ ((e) => (e["01"] = "01", e["02"] = "02", e["03"] = "03", e["04"] = "04", e["05"] = "05", e["06"] = "06", e["07"] = "07", e["08"] = "08", e["09"] = "09", e))(mt || {});
const no = ke.Categorical, Ge = ie.Skyblue, oo = vt.SkyTeal;
function ao(e) {
return e === ke.Divergent ? oo : Ge;
}
function lo(e) {
return Object.values(mt).includes(e);
}
function $t(e, n) {
return n === ke.Divergent ? Object.values(vt).includes(e) : Object.values({
...ie,
...qt,
...ft,
...mt
}).includes(e);
}
function uo(e, n) {
const t = Object.values(ie).indexOf(e);
return Dn(Object.values(ie), t > -1 ? t : 0)[n];
}
function ro(e, n) {
const t = 50 + n * 10;
return `${e}-${t}`;
}
function io(e, n) {
const t = (n + 1) * 10;
return `${e}-${t}`;
}
function Ot(e, n, t) {
switch (n) {
default:
case ke.Categorical:
return lo(e) ? e : uo(e, t);
case ke.Sequential:
return ro(e, t);
case ke.Divergent:
return io(e, t);
}
}
function so(e, n, t = no, o) {
return $t(e, t) ? e : (o > 4 && (ge(ve.ColorLoop), o = o % 5), $t(n, t) ? Ot(n, t, o) : Ot(ao(t), t, o));
}
function co(e) {
return e.map((n) => $n(n) ? n : { value: n });
}
function vo(e) {
return e.__internal === !0;
}
const pt = (e = null) => ({
data: {
type: Array,
required: !0,
validator: e || void 0
},
labels: {
type: Array,
default: void 0
},
color: {
type: String,
default: ie.Skyblue
},
title: {
type: String,
default: null
}
});
function ht(e, n, t, o, a) {
const u = Fe({
width: 0,
height: 0
}), l = Bn(12), i = v(() => {
var m;
return e.value.length > 5 && ge(ve.DatasetLength), (m = e.value) == null ? void 0 : m.map(
(r, f) => {
if (vo(r)) return r;
const y = co(r.values), p = so(
r.color,
t == null ? void 0 : t.value,
o == null ? void 0 : o.value.colorPalette,
f
);
return {
...r,
values: y,
color: p,
__internal: !0
};
}
);
}), c = v(() => Array.isArray(n.value) ? n.value : Wt(e.value).map((m, r) => r));
function s(m) {
const r = (a == null ? void 0 : a.value) === H.HORIZONTAL && c.value.length * (((o == null ? void 0 : o.value.barHeight) || Tt) * 2) + ((o == null ? void 0 : o.value.barHeight) || Tt) || m.height;
u.width = m.width, u.height = r;
}
return {
chartID: l,
computedLabels: c,
containerSize: u,
internalData: i,
updateSize: s
};
}
const fo = () => ({
xScale: {
type: Function,
default: null
},
yScale: {
type: Function,
default: null
}
});
function mo(e, n, t, o, a) {
const u = S(null), l = S(null);
function i() {
var m, r, f, y;
const { width: c, height: s } = t;
!c && !s || (o.value === H.HORIZONTAL ? (u.value = (m = e.value) != null && m.length ? xt(
e.value,
c,
o.value,
a.value.startOnZero
) : null, l.value = (r = n.value) != null && r.length ? It(
n.value,
s,
o.value,
a.value
) : null) : (u.value = (f = n.value) != null && f.length ? It(
n.value,
c,
o.value,
a.value
) : null, l.value = (y = e.value) != null && y.length ? xt(
e.value,
s,
o.value,
a.value.startOnZero
) : null));
}
return Vt(i), { xScale: u, yScale: l };
}
function It(e, n, t, o) {
const a = [0, n], { padding: u, paddingInner: l, paddingOuter: i } = o, c = u ?? (t === H.HORIZONTAL ? Xt : Ut);
return Object.assign(
Be().range(a).paddingInner(l ?? c).paddingOuter(i ?? c).domain(e.map((s, m) => m)),
{ labels: e }
);
}
function xt(e, n, t, o) {
const a = Ft(e).filter((m) => m != null), u = [0, n];
if (a.length === 0)
return Me().range(u).domain([0, 0]).nice();
const l = Math.min(...a), i = o && l > 0 ? 0 : l, c = Math.max(...a), s = t === H.HORIZONTAL ? [i, c] : [c, i];
return Me().range(u).domain(s).nice();
}
function wt(e) {
return (e == null ? void 0 : e.range) !== void 0 || (e == null ? void 0 : e.copy) !== void 0;
}
function tt(e, n) {
return de(e) ? e.bandwidth() / 2 + e(e.domain()[n]) : e(n);
}
function Et(e, n, {
padding: t,
paddingInner: o,
paddingOuter: a
} = {}) {
const u = t ?? (n === H.HORIZONTAL ? Xt : Ut);
return e.copy().paddingInner(o ?? u).paddingOuter(a ?? u);
}
function gt(e) {
return Object.values(H).includes(e);
}
const we = (e, n = !0) => ({
...pt(e),
...fo(),
...Re(),
classList: {
type: [String, Array],
default: () => []
},
hoveredIndex: {
type: Number,
default: null
},
...n ? {
orientation: {
type: String,
default: H.VERTICAL,
validator: gt
}
} : {}
}), po = (e) => ({
...pt(e),
...Re(),
hoveredElement: {
type: [Number, String],
default: null
}
});
function ho() {
const e = S(), n = Fe({
dimensions: {}
}), t = new ResizeObserver((o) => {
o.forEach((a) => {
n.dimensions = a.contentRect;
});
});
return ye(() => {
t.observe(e.value);
}), Pt(() => {
t.unobserve(e.value);
}), { resizeState: n, resizeRef: e };
}
const go = ["height"], yo = ["transform"], _o = /* @__PURE__ */ Z({
__name: "lume-chart-container",
props: {
margins: {
type: Object,
required: !0
},
containerSize: {
type: Object,
default: () => ({ width: 0, height: 0 })
},
transparentBackground: {
type: Boolean,
default: !1
},
noMinSize: {
type: Boolean,
default: !1
},
orientation: {
type: String,
default: H.VERTICAL,
validator: gt
}
},
emits: ["click", "mouseenter", "mouseleave", "resize"],
setup(e, { emit: n }) {
const t = e, o = n, { margins: a, containerSize: u } = ee(t), l = S(null), { resizeRef: i, resizeState: c } = ho(), s = v(
() => u.value.height + a.value.top + a.value.bottom
);
return Vt(() => {
if (!l.value) return;
const { width: m } = c.dimensions, { height: r } = l.value.getBoundingClientRect();
if (!m || t.orientation === H.VERTICAL && !r)
return;
const f = m - a.value.left - a.value.right, y = r - a.value.top - a.value.bottom, p = {
width: f > 0 ? f : 0,
height: y > 0 ? y : 0,
outerWidth: m,
outerHeight: r
};
o("resize", p);
}), (m, r) => (_(), I("div", {
ref_key: "resizeRef",
ref: i,
class: te(["lume-chart-container", {
"lume-chart-container--minimum": !e.noMinSize
}]),
"data-j-chart-container": ""
}, [
M(m.$slots, "header", {}, void 0, !0),
(_(), I("svg", {
ref_key: "root",
ref: l,
class: te(["lume-chart-container__svg", {
"lume-chart-container__svg--transparent": e.transparentBackground
}]),
height: s.value,
"data-j-chart-container__root": "",
onClick: r[0] || (r[0] = (f) => o("click", f)),
onMouseenter: r[1] || (r[1] = (f) => o("mouseenter", f)),
onMouseleave: r[2] || (r[2] = (f) => o("mouseleave", f))
}, [
G("g", {
transform: `translate(${d(a).left}, ${d(a).top})`,
class: "lume-chart-container__group",
"data-j-chart-container__group": ""
}, [
M(m.$slots, "default", {}, void 0, !0)
], 8, yo)
], 42, go)),
M(m.$slots, "footer", {}, void 0, !0),
M(m.$slots, "extra", {}, void 0, !0)
], 2));
}
}), ko = /* @__PURE__ */ q(_o, [["__scopeId", "data-v-d53cdc3e"]]), bo = ["onClick", "onMouseenter"], Ao = /* @__PURE__ */ Z({
__name: "lume-chart-legend",
props: {
data: {
type: Array,
validator: Ln,
required: !0
}
},
emits: ["click", "mouseenter", "mouseleave"],
setup(e, { emit: n }) {
const t = n;
return (o, a) => (_(), I("div", {
class: "lume-chart-legend",
"data-j-chart-legend": "",
onMouseleave: a[0] || (a[0] = (u) => t("mouseleave"))
}, [
(_(!0), I(Q, null, W(e.data, (u, l) => (_(), I("div", {
key: `legend-item-${l}`,
class: "lume-chart-legend__item lume-typography--caption",
tabindex: "0",
"data-j-chart-legend__symbol-wrapper": "",
onClick: (i) => t("click", { index: l, dataset: u, event: i }),
onMouseenter: (i) => t("mouseenter", { index: l, dataset: u, event: i })
}, [
G("span", {
class: te(["lume-chart-legend__symbol", `lume-background-color--${u.color}`]),
"data-j-chart-legend__symbol": ""
}, null, 2),
se(" " + ne(u.label || l), 1)
], 40, bo))), 128))
], 32));
}
}), Nt = /* @__PURE__ */ q(Ao, [["__scopeId", "data-v-6f1d1c44"]]), To = {}, Lo = {
class: "lume-tooltip__title",
"data-j-tooltip__title": ""
};
function $o(e, n) {
return _(), I("div", Lo, [
M(e.$slots, "default", {}, void 0, !0)
]);
}
const Oo = /* @__PURE__ */ q(To, [["render", $o], ["__scopeId", "data-v-8af3fac6"]]), Io = {}, xo = {
class: "lume-tooltip__item",
"data-j-tooltip__summary-item": ""
}, wo = { class: "lume-tooltip__value" };
function Eo(e, n) {
return _(), I("li", xo, [
G("span", null, [
M(e.$slots, "default", {}, void 0, !0)
]),
G("strong", wo, [
M(e.$slots, "value", {}, void 0, !0)
])
]);
}
const No = /* @__PURE__ */ q(Io, [["render", Eo], ["__scopeId", "data-v-4ed7ec1b"]]), Do = {
class: "lume-tooltip__item",
"data-j-tooltip__item": ""
}, Ho = { "data-j-tooltip__item__label": "" }, Bo = {
class: "lume-tooltip__value",
"data-j-tooltip__item__value": ""
}, Mo = /* @__PURE__ */ Z({
__name: "lume-tooltip-item",
props: {
color: {
type: String,
default: null
}
},
setup(e) {
return (n, t) => (_(), I("li", Do, [
e.color ? (_(), I("span", {
key: 0,
class: te([[`lume-background-color--${e.color}`], "lume-tooltip__symbol"]),
"data-j-tooltip__item__symbol": ""
}, null, 2)) : z("", !0),
G("span", Ho, [
M(n.$slots, "label", {}, void 0, !0)
]),
G("strong", Bo, [
M(n.$slots, "value", {}, void 0, !0)
])
]));
}
}), Ro = /* @__PURE__ */ q(Mo, [["__scopeId", "data-v-4f995c3c"]]), So = (e) => (sn("data-v-e7c90551"), e = e(), cn(), e), Go = { class: "lume-tooltip__items" }, jo = {
key: 0,
class: "lume-tooltip__break"
}, Vo = /* @__PURE__ */ So(() => /* @__PURE__ */ G("hr", null, null, -1)), Po = [
Vo
], Co = /* @__PURE__ */ Z({
__name: "lume-tooltip",
props: {
opened: {
type: Boolean,
default: !1
},
targetElement: {
type: Element,
default: null
},
items: {
type: Array,
required: !0
},
position: {
type: String,
default: "auto",
validator: (e) => Vn.includes(e)
},
fixedPositioning: {
type: Boolean,
default: !1
},
inverse: {
type: Boolean,
default: !1
},
modifiers: {
type: Array,
default: null
},
title: {
type: [String, Number],
default: null
},
summary: {
type: String,
default: null
},
...Re()
},
emits: ["opened", "moved", "closed", "tooltip-mouseenter", "tooltip-mouseleave"],
setup(e, { emit: n }) {
const t = e, o = n, a = S(null), { items: u, options: l } = ee(t), i = ue(), c = S(null), { allOptions: s } = fe(l), m = v(
() => s.value.fixedPositioning ?? t.fixedPositioning
), r = v(
() => m.value ? "fixed" : "absolute"
), f = v(() => [
{
name: "computeStyles",
options: {
adaptive: !1
// so that we can have smooth transitions
}
},
{
name: "offset",
options: { offset: [0, s.value.offset || 8] }
},
...t.modifiers || []
]), y = v(
() => s.value.showTitle !== !1 && t.title != null
), p = v(() => Ve(s.value.valueFormat)), b = v(() => Ve(s.value.titleFormat)), $ = v(
() => {
var P;
return ((P = u.value) == null ? void 0 : P.find((w) => w.isSummary)) || {
label: s.value.summary ?? t.summary
};
}
), L = v(() => i.summary || $.value.label), g = v(() => t.inverse || s.value.inverse ? [...u.value].reverse() : u.value);
function O() {
t.targetElement && a.value && (c.value = kn(t.targetElement, a.value, {
placement: t.position,
strategy: r.value,
modifiers: f.value
}), o("opened", t.targetElement));
}
function N() {
c.value && (c.value.destroy(), o("closed"), a.value && a.value.classList.remove("lume-tooltip--animated"));
}
function D() {
c.value && (s.value.withAnimation !== !1 && a.value && a.value.classList.add("lume-tooltip--animated"), t.targetElement ? function() {
c.value.state.elements.reference = t.targetElement, c.value.update(), o("moved", t.targetElement);
}() : N());
}
return X(
() => t.targetElement,
async (P, w) => {
!w && P ? (await Qe(), O()) : D();
}
), ye(O), Pt(N), (P, w) => e.opened && e.targetElement ? (_(), I("div", {
key: 0,
ref_key: "root",
ref: a,
class: te(["lume-tooltip lume-typography--caption", {
"lume-tooltip--pointer-events": d(l).withPointerEvents
}]),
"data-j-tooltip": "",
onMouseenter: w[0] || (w[0] = (B) => o("tooltip-mouseenter")),
onMouseleave: w[1] || (w[1] = (B) => o("tooltip-mouseleave"))
}, [
M(P.$slots, "default", {}, () => [
M(P.$slots, "title", {}, () => [
y.value ? (_(), Y(d(Oo), { key: 0 }, {
default: V(() => [
se(ne(b.value(e.title)), 1)
]),
_: 1
})) : z("", !0)
], !0),
G("ul", Go, [
M(P.$slots, "summary", {}, () => [
L.value ? (_(), Y(d(No), { key: 0 }, ce({
default: V(() => [
se(ne($.value.label) + " ", 1)
]),
_: 2
}, [
$.value.value ? {
name: "value",
fn: V(() => [
se(ne(p.value($.value.value)), 1)
]),
key: "0"
} : void 0
]), 1024)) : z("", !0)
], !0),
L.value ? (_(), I("li", jo, Po)) : z("", !0),
M(P.$slots, "items", {}, () => [
(_(!0), I(Q, null, W(g.value, (B) => (_(), Y(d(Ro), {
key: B.label,
color: B.color
}, {
label: V(() => [
se(ne(B.label), 1)
]),
value: V(() => [
se(ne(p.value(B.value)), 1)
]),
_: 2
}, 1032, ["color"]))), 128))
], !0)
])
], !0)
], 34)) : z("", !0);
}
}), Fo = /* @__PURE__ */ q(Co, [["__scopeId", "data-v-e7c90551"]]), We = () => ({
data: {
type: Array,
required: !0
},
labels: {
type: Array,
default: () => []
},
options: {
type: Object,
default: () => ({})
},
orientation: {
type: String,
default: H.VERTICAL,
validator: gt
},
xScale: {
type: Function,
default: () => null
},
yScale: {
type: Function,
default: () => null
},
hoveredIndex: {
type: Number,
default: -1
},
containerSize: {
type: Object,
default: () => ({ width: 0, height: 0 })
},
transition: {
type: Boolean,
default: !0
},
classList: {
type: [String, Array],
default: () => []
}
}), zo = { class: "lume-overlay-group" }, Wo = /* @__PURE__ */ Z({
__name: "lume-overlay-group",
props: {
...We(),
orientation: {
type: String,
default: H.VERTICAL
}
},
emits: ["click", "lume__internal--hover", "mouseover"],
setup(e, { emit: n }) {
const t = e, o = n, { data: a, orientation: u, xScale: l, yScale: i } = ee(t), c = v(() => Wt(a));
function s(m) {
var L;
const r = u.value === H.HORIZONTAL ? i.value : l.value, f = r.domain(), y = On(r), p = ((L = r.paddingInner) == null ? void 0 : L.call(r)) ?? 0, b = y * p, $ = de(r) ? r(f[m]) - b / 2 : r(m) - y / 2;
return u.value === H.HORIZONTAL ? {
width: Math.max(...l.value.range()),
height: y,
transform: `translate(0, ${$})`
} : {
width: y,
height: Math.max(...i.value.range()),
transform: `translate(${$}, 0)`
};
}
return (m, r) => (_(), I("g", zo, [
(_(!0), I(Q, null, W(c.value, (f, y) => (_(), Y(d(dt), j(s(y), {
key: `overlay-${y}`,
"data-j-lume-overlay-group": y,
transition: !1,
"class-list": "lume-fill--transparent",
onMouseover: (p) => o("lume__internal--hover", y),
onClick: (p) => o("click", { index: y, event: p })
}), null, 16, ["data-j-lume-overlay-group", "onMouseover", "onClick"]))), 128))
]));
}
}), _e = (e, n) => {
function t(u, ...l) {
}
function o(u, l) {
}
return { componentEventPropagator: {}, emitInternalEvent: t, listenInternalEvent: o };
};
function Zo(e) {
return { hasNegativeValues: v(
() => Ft(e.value).some((t) => t < 0)
) };
}
function Uo(e, n, t, o) {
const a = v(
() => o.value === H.HORIZONTAL
), u = v(
() => {
var s;
return e.height - (a != null && a.value ? 0 : ((s = t.value) == null ? void 0 : s.call(t, 0)) || 0);
}
), l = v(
() => {
var s;
return a != null && a.value ? ((s = n.value) == null ? void 0 : s.call(n, 0)) || 0 : e.width;
}
), i = v(
() => {
var s;
return a != null && a.value ? "translate(0, 0)" : `translate(0, ${((s = t.value) == null ? void 0 : s.call(t, 0)) || 0})`;
}
);
return { negativeBarAttributes: v(() => ({
width: l.value,
height: u.value,
transform: i.value
})) };
}
function Xo(e, n) {
return e.reduce((t, o) => ct(o.values, n).map(
(a, u) => t[u] ? a.value > t[u] ? a.value : t[u] : a.value ?? 0
), []);
}
function Yo(e, n) {
return e.reduce((t, o) => ct(o.values, n).map(
(a, u) => {
const l = a.value == null || a.value < 0 ? 0 : a.value;
return t[u] ? t[u] + l : l;
}
), []);
}
const Dt = {
"stacked-bar": Yo
};
function en(e, n, t, o, a, u, l, i) {
const c = v(
() => {
var m;
return n.value.withTooltip !== !1 && !((m = n.value.tooltipOptions) != null && m.targetElement);
}
);
function s(m) {
var y;
const r = ((y = a == null ? void 0 : a.value) == null ? void 0 : y.length) ?? 0, f = i != null && i.value && Dt[i.value] ? Dt[i.value](
m,
r
) : Xo(m, r);
e.value = f.map((p, b) => ({
cx: (u == null ? void 0 : u.value) === H.HORIZONTAL ? t.value(p) : tt(t.value, b),
cy: (u == null ? void 0 : u.value) === H.HORIZONTAL ? tt(o.value, b) : o.value(p)
}));
}
return X(
[t, o],
() => {
t.value && o.value && (l != null && l.value) && c.value && s(l.value);
},
{ immediate: !0 }
), { shouldGenerateTooltipAnchors: c, updateTooltipAnchorAttributes: s };
}
function Ko() {
const e = Fe({
opened: !1,
targetElement: null
});
return { tooltipConfig: e, showTooltip: (o) => {
e.opened = !0, e.targetElement = o;
}, hideTooltip: () => {
e.opened = !1, e.targetElement = null;
} };
}
function Jo(e) {
return { getTooltipItems: v(
() => (t) => e.value.map(({ color: o, label: a, values: u }) => {
var l, i, c;
return {
color: ((l = u[t]) == null ? void 0 : l.color) || o,
label: a,
value: ((i = u[t]) == null ? void 0 : i.label) ?? ((c = u[t]) == null ? void 0 : c.value) ?? Zt
};
})
) };
}
const nt = 16, ot = 8, at = 28, lt = 24, be = {
VERTICAL: {
top: nt,
right: ot,
bottom: at,
left: lt
},
HORIZONTAL: {
top: nt,
right: ot,
bottom: at,
left: lt
}
};
function Qo(e) {
return !e || e === "auto" || e.top == null || e.top === "auto" ? nt : e.top;
}
function qo(e) {
return !e || e === "auto" || e.right == null || e.right === "auto" ? ot : e.right;
}
function ea(e, n) {
return !e || e === "auto" || e.bottom == null || e.bottom === "auto" ? n || at : e.bottom;
}
function ta(e, n) {
return !e || e === "auto" || e.left == null || e.left === "auto" ? n || lt : e.left;
}
const na = { class: "lume-chart__header" }, oa = { class: "lume-chart__header-section" }, aa = {
key: 0,
class: "lume-chart__title lume-chart-title lume-typography--display"
}, la = { class: "lume-chart__controls" }, ua = { class: "lume-chart__header-section" }, ra = {
key: 0,
class: "lume-chart__axis-title lume-axis-title lume-typography--caption"
}, ia = { key: 3 }, sa = ["r"], ca = {
key: 0,
class: "lume-chart__axis-title lume-chart__axis-title--centered lume-axis-title lume-typography--body"
}, da = /* @__PURE__ */ Z({
__name: "lume-chart",
props: {
...we(),
chartType: {
type: String,
default: null
}
},
setup(e, { emit: n }) {
const t = e, o = ue(), a = n, { data: u, labels: l, color: i, options: c, orientation: s, chartType: m } = ee(t), r = S(-1), f = S(null), y = S(null), p = S([]), b = S(null), $ = S(0), L = S(0), { allOptions: g } = fe(c), { internalData: O, computedLabels: N, containerSize: D, updateSize: P, chartID: w } = ht(u, l, i, g, s), { xScale: B, yScale: U } = mo(
O,
N,
D,
s,
g
), K = v(() => ({
top: Qo(g.value.margins),
right: qo(g.value.margins),
bottom: ea(g.value.margins, $.value),
left: ta(g.value.margins, L.value)
})), J = v(() => {
var A;
return t.xScale ? wt(t.xScale) ? t.xScale : (A = t.xScale) == null ? void 0 : A.call(t, O.value, l.value, D) : B.value;
}), C = v(() => {
var A;
return t.yScale ? wt(t.yScale) ? t.yScale : (A = t.yScale) == null ? void 0 : A.call(t, O.value, l.value, D) : U.value;
}), ae = v(() => ({
...g.value.xAxisOptions,
withHover: s.value === H.VERTICAL
})), Ne = v(() => ({
...g.value.yAxisOptions,
withHover: s.value === H.HORIZONTAL
})), me = v(() => {
var A;
return (A = g.value.xAxisOptions) == null ? void 0 : A.title;
}), Te = v(() => {
var A;
return (A = g.value.yAxisOptions) == null ? void 0 : A.title;
}), Le = v(() => {
var A;
return ((A = g.value.xAxisOptions) == null ? void 0 : A.withTitle) !== !1 && me.value;
}), k = v(() => {
var A;
return ((A = g.value.yAxisOptions) == null ? void 0 : A.withTitle) !== !1 && Te.value;
}), E = v(
() => u.value.every((A) => !A.values.length) || u.value.every((A) => A.values.every((T) => T === null))
), h = v(() => {
const A = [], { noBaseScales: T } = g.value;
return T || A.push(() => !!(J.value && C.value)), A.every((x) => x() === !0);
}), { hasNegativeValues: R } = Zo(O), { negativeBarAttributes: F } = Uo(
D,
J,
C,
s
), { shouldGenerateTooltipAnchors: le } = en(
p,
g,
J,
C,
l,
s,
O,
m
), { tooltipConfig: De, showTooltip: Ze, hideTooltip: Ue } = Ko(), { getTooltipItems: $e } = Jo(O), He = v(
() => {
var A;
return ((A = g.value.tooltipOptions) == null ? void 0 : A.position) || "top";
}
), Oe = v(() => {
var T;
const A = (T = g.value.tooltipOptions) == null ? void 0 : T.withPointerEvents;
return De.opened && (!A || A && b.value === !1);
});
function je(A) {
var x;
if (g.value.withHover === !1 || A === r.value) return;
const T = r.value;
if (r.value = A, g.value.withTooltip !== !1) {
const Ye = (x = g.value.tooltipOptions) != null && x.targetElement ? g.value.tooltipOptions.targetElement === "self" ? y.value.$el : g.value.tooltipOptions.targetElement : f.value[A];
Ze(Ye);
}
a("hovered-index-changed", { newIndex: A, oldIndex: T }), a("update:hoveredIndex", A);
}
function Xe() {
Ue(), r.value = -1, a("update:hoveredIndex", -1);
}
function _t(A) {
if (!u.value.some(
({ values: x }) => A <= x.length - 1
)) {
ge(ve.InvalidHoveredIndex);
return;
}
A == null || A === -1 ? Xe() : je(A);
}
function un() {
setTimeout(() => {
Oe.value && Xe(), a("chart-mouseleave");
}, 0);
}
function rn(A) {
P(A), a("resize", A);
}
function kt({ index: A, value: T, event: x }) {
A !== null && je(A), a("axis-mouseenter", { index: A, value: T, event: x });
}
function bt({ index: A, value: T, event: x }) {
a("axis-click", { index: A, value: T, event: x });
}
return X(
u,
(A, T) => a("data-changed", { newValue: A, oldValue: T })
), X(
l,
(A, T) => a("labels-changed", { newValue: A, oldValue: T })
), X(E, (A) => A && ge(ve.Empty), { immediate: !0 }), X(() => t.hoveredIndex, _t), X(
p,
(A) => {
A && t.hoveredIndex != null && r.value === -1 && _t(t.hoveredIndex);
},
{ flush: "post" }
), X(b, (A) => {
A === !1 && De.opened && Xe();
}), ye(async () => {
a("rendered"), o.groups || console.error('"groups" `<slot>` must have content.');
}), Ke("chartID", w), Ke("isEmpty", E), Ke("tooltipAnchorAttributes", p), (A, T) => (_(), Y(d(ko), {
id: `lume-chart_${d(w)}`,
ref_key: "chartContainer",
ref: y,
margins: K.value,
"container-size": d(D),
"no-min-size": d(g).noMinSize,
"transparent-background": d(g).transparentBackground,
orientation: d(s),
"data-j-lume-chart": "",
onResize: rn,
onClick: T[24] || (T[24] = (x) => a("chart-click", x)),
onMouseenter: T[25] || (T[25] = (x) => a("chart-mouseenter", x)),
onMouseleave: un
}, {
header: V(() => [
G("div", na, [
G("div", oa, [
A.title ? (_(), I("h1", aa, ne(A.title), 1)) : z("", !0),
G("div", la, [
M(A.$slots, "controls", {}, void 0, !0)
])
]),
G("div", ua, [
k.value ? (_(), I("h3", ra, ne(Te.value), 1)) : z("", !0),
M(A.$slots, "legend", { data: d(O) }, () => [
d(g).withLegend !== !1 && d(g).legendPosition !== "bottom" ? (_(), Y(d(Nt), {
key: 0,
data: d(O),
class: "lume-chart__legend",
"data-j-lume-chart__legend": "",
onClick: T[0] || (T[0] = (x) => a("legend-click", x)),
onMouseenter: T[1] || (T[1] = (x) => a("legend-mouseenter", x)),
onMouseleave: T[2] || (T[2] = (x) => a("legend-mouseleave"))
}, null, 8, ["data"])) : z("", !0)
], !0)
])
])
]),
footer: V(() => [
Le.value ? (_(), I("h3", ca, ne(me.value), 1)) : z("", !0),
d(g).withLegend !== !1 && d(g).legendPosition == "bottom" ? (_(), Y(d(Nt), {
key: 1,
data: d(O),
class: "lume-chart__legend lume-chart__legend--bottom",
"data-j-lume-chart__legend": "",
onClick: T[16] || (T[16] = (x) => a("legend-click", x)),
onMouseenter: T[17] || (T[17] = (x) => a("legend-mouseenter", x)),
onMouseleave: T[18] || (T[18] = (x) => a("legend-mouseleave"))
}, null, 8, ["data"])) : z("", !0)
]),
extra: V(() => [
M(A.$slots, "tooltip", j(d(De), {
data: d(O),
labels: d(N),
title: d(N)[r.value],
items: d($e)(r.value),
position: He.value,
withTooltip: d(g).withTooltip !== !1,
hoveredIndex: r.value,
handleMouseEnter: () => b.value = !0,
handleMouseLeave: () => b.value = !1,
options: d(g).tooltipOptions
}), () => [
d(g).withTooltip !== !1 ? (_(), Y(d(Fo), j({ key: 0 }, d(De), {
position: He.value,
title: d(N)[r.value],
items: d($e)(r.value),
options: d(g).tooltipOptions,
"data-j-lume-chart__tooltip": "",
onOpened: T[19] || (T[19] = (x) => a("tooltip-opened", {
index: r.value,
targetElement: x
})),
onMoved: T[20] || (T[20] = (x) => a("tooltip-moved", {
index: r.value,
targetElement: x
})),
onClosed: T[21] || (T[21] = (x) => a("tooltip-closed")),
onTooltipMouseenter: T[22] || (T[22] = (x) => b.value = !0),
onTooltipMouseleave: T[23] || (T[23] = (x) => b.value = !1)
}), {
default: V(() => [
M(A.$slots, "tooltip-content", {
data: d(O),
labels: d(N),
hoveredIndex: r.value
}, void 0, !0)
]),
_: 3
}, 16, ["position", "title", "items", "options"])) : z("", !0)
], !0)
]),
default: V(() => [
h.value ? (_(), I(Q, { key: 0 }, [
d(R) ? (_(), Y(d(dt), j({ key: 0 }, d(F), {
"class-list": "lume-fill--negative",
transition: !1,
"data-j-lume-chart__negative-values": ""
}), null, 16)) : z("", !0),
d(g).withAxes !== !1 ? M(A.$slots, "axes", {
key: 1,
xScale: J.value,
yScale: C.value,
containerSize: d(D),
options: d(g),
hoveredIndex: r.value
}, () => [
re(d(Lt), {
type: "x",
scale: J.value,
"container-size": d(D),
options: ae.value,
"hovered-index": r.value,
orientation: d(s),
"data-j-lume-chart__x-axis": "",
onClick: bt,
onMouseenter: kt,
onMouseleave: T[3] || (T[3] = (x) => a("axis-mouseleave")),
"onLume__internal-AxisSize": T[4] || (T[4] = (x) => $.value = x)
}, null, 8, ["scale", "container-size", "options", "hovered-index", "orientation"]),
re(d(Lt), {
type: "y",
scale: C.value,
"container-size": d(D),
options: Ne.value,
"hovered-index": r.value,
orientation: d(s),
"data-j-lume-chart__y-axis": "",
onClick: bt,
onMouseenter: kt,
onMouseleave: T[5] || (T[5] = (x) => a("axis-mouseleave")),
"onLume__internal-AxisSize": T[6] || (T[6] = (x) => L.value = x)
}, null, 8, ["scale", "container-size", "options", "hovered-index", "orientation"])
], !0) : z("", !0),
d(g).withHover !== !1 ? (_(), Y(d(Wo), {
key: 2,
data: d(O),
orientation: d(s),
"x-scale": J.value,
"y-scale": C.value,
"data-j-lume-chart__overlay-group": "",
"onLume__internal-Hover": je
}, null, 8, ["data", "orientation", "x-scale", "y-scale"])) : z("", !0),
d(le) ? (_(), I("g", ia, [
(_(!0), I(Q, null, W(p.value, (x, Ye) => (_(), I("circle", j(x, {
ref_for: !0,
ref_key: "tooltipAnchor",
ref: f,
key: `anchor_${Ye}`,
r: d(jn),
class: "lume-fill--transparent"
}), null, 16, sa))), 128))
])) : z("", !0),
M(A.$slots, "groups", {
data: d(O),
labels: d(N),
options: d(g),
orientation: d(s),
xScale: J.value,
yScale: C.value,
hoveredIndex: r.value,
containerSize: d(D),
transition: d(g).withTransition !== !1,
classList: A.classList,
onNodeClick: T[7] || (T[7] = (x) => a("node-click", x)),
onNodeMouseenter: T[8] || (T[8] = (x) => a("node-mouseenter", x)),
onNodeMouseleave: T[9] || (T[9] = (x) => a("node-mouseleave", x)),
onLinkClick: T[10] || (T[10] = (x) => a("link-click", x)),
onLinkMouseenter: T[11] || (T[11] = (x) => a("link-mouseenter", x)),
onLinkMouseleave: T[12] || (T[12] = (x) => a("link-mouseleave", x)),
onBarClick: T[13] || (T[13] = (x) => a("bar-click", x)),
onLineClick: T[14] || (T[14] = (x) => a("line-click", x)),
onPointClick: T[15] || (T[15] = (x) => a("point-click", x)),
"onLume__internal-Hover": je
}, void 0, !0)
], 64)) : z("", !0)
]),
_: 3
}, 8, ["id", "margins", "container-size", "no-min-size", "transparent-background", "orientation"]));
}
}), Ee = /* @__PURE__ */ q(da, [["__scopeId", "data-v-5aa3d9ab"]]), Ht = 8, va = 8, fa = 20, xe = 2, Bt = 2, ma = ["dy", "dominant-baseline"], pa = ["y", "x", "width", "height"], ha = { class: "lume-alluvial-group__label-wrapper" }, ga = /* @__PURE__ */ Z({
__name: "lume-alluvial-node-label",
props: {
bottom: { type: Boolean, default: !1 },
left: { type: Boolean, default: !1 },
maxWidth: { type: Number, default: 0 }
},
emits: ["lume__internal--node-resize"],
setup(e, { emit: n }) {
const t = e, o = n, a = S(null), u = S(t.maxWidth), l = S(1);
return X(
[a, () => t.maxWidth],
async ([i, c]) => {
if (i && c) {
u.value = c, await Qe();
const { width: s, height: m } = i.getBoundingClientRect();
u.value = s + Bt > c ? c : s + Bt, l.value = Math.ceil(m);
}
},
{ immediate: !0 }
), X(u, async (i) => {
i !== t.maxWidth && (await Qe(), o("lume__internal--node-resize"));
}), (i, c) => e.maxWidth ? (_(), I("foreignObject", {
key: 1,
class: "lume-alluvial-group__node-foreign",
y: e.bottom ? "0.1em" : -l.value + 1,
x: e.left ? -u.value : 0,
width: u.value,
height: l.value
}, [
G("div", ha, [
G("span", {
ref_key: "text",
ref: a,
class: "lume-alluvial-group__node-label"
}, [
M(i.$slots, "default", {}, void 0, !0)
], 512)
])
], 8, pa)) : (_(), I("text", {
key: 0,
class: "lume-alluvial-group__node-label",
dy: e.bottom ? ".2em" : "-.2em",
"dominant-baseline": e.bottom ? "hanging" : "auto"
}, [
M(i.$slots, "default", {}, void 0, !0)
], 8, ma));
}
}), ya = /* @__PURE__ */ q(ga, [["__scopeId", "data-v-7126dfdb"]]), _a = ["y", "dominant-baseline"], ka = /* @__PURE__ */ Z({
__name: "lume-alluvial-node-value",
props: {
bottom: { type: Boolean, default: !0 }
},
setup(e) {
return (n, t) => (_(), I("text", {
class: "lume-alluvial-group__node-value",
y: e.bottom ? ".2em" : "-.2em",
"dominant-baseline": e.bottom ? "hanging" : "auto"
}, [
M(n.$slots, "default", {}, void 0, !0)
], 8, _a));
}
}), ba = /* @__PURE__ */ q(ka, [["__scopeId", "data-v-b4fc758b"]]), Aa = ["transform"], Ta = ["transform"], La = ["transform"], $a = /* @__PURE__ */ Z({
__name: "lume-alluvial-node-header",
props: {
x: { type: Number, required: !0 },
y: { type: Number, required: !0 }
},
setup(e) {
const n = S(null), t = v(
() => n.value && `translate(${-n.value.getBBox().width / 2}, 0)`
), o = v(
() => n.value && `translate(${n.value.getBBox().width / 2}, 0)`
);
return (a, u) => (_(), I("g", {
transform: `translate(${e.x}, ${e.y})`
}, [
G("g", { transform: t.value }, [
M(a.$slots, "before", {}, void 0, !0)
], 8, Ta),
G("text", {
ref_key: "textRef",
ref: n,
class: "lume-alluvial-group__node-header lume-typography--caption"
}, [
M(a.$slots, "default", {}, void 0, !0)
], 512),
G("g", { transform: o.value }, [
M(a.$slots, "after", {}, void 0, !0)
], 8, La)
], 8, Aa));
}
}), Oa = /* @__PURE__ */ q($a, [["__scopeId", "data-v-0e483453"]]);
function Mt(e, n) {
return {
x0: 0 + (n ? n.left : 0),
y0: 0 + (n ? n.top : 0),
x1: e.width - (n ? n.right : 0),
y1: e.height - (n ? n.bottom : 0)
};
}
function Ia(e) {
const n = S(Mt(e));
function t(o) {
n.value = Mt(e, o);
}
return { extents: n, updateExtents: t };
}
var Pe = /* @__PURE__ */ ((e) => (e.GraphProblem = "There was an issue generating your alluvial graph.", e.BarScaleDomainAbove0 = "Bar linear scale domain cannot start above 0!", e.BarScaleNull = "Bar linear scale cannot be `null`", e))(Pe || {});
const xa = "[lume] ";
function ut(e, n, t = !0) {
t && Ct() || console.error(xa + "Error: " + e, n);
}
const wa = 200;
function Ie(e) {
return typeof e == "string" || typeof e == "number" ? e : e.id ?? e.label;
}
function Ea(e, n) {
return n.nodes.find((t) => t.id === e);
}
function Na(e, n) {
return n.links.find((t) => t.id === e);
}
function tn(e) {
return !!(e.sourceLinks && e.targetLinks);
}
function Da(e, n) {
if (!n) return;
const t = e.nodes.filter((l) => l.targetLinks.length === 0).map((l) => `${l.id}`), o = e.nodes.filter((l) => l.sourceLinks.length === 0).map((l) => `${l.id}`), a = n.filter((l) => t.includes(l.dataset.id)).reduce(
(l, i) => Math.max(l, i.getBBox().width),
-1 / 0
), u = n.filter((l) => o.includes(l.dataset.id)).reduce(
(l, i) => Math.max(l, i.getBBox().width),
-1 / 0
);
return {
left: a,
top: 0,
right: u,
bottom: 0
};
}
function Ha(e) {
return e.map((n) => {
const t = n.y1 - n.y0 < xe;
return {
x: n.x0,
y: n.y0 - (t ? xe / 2 : 0),
// Negative offset to account for the min. height
width: n.x1 - n.x0,
height: t ? xe : n.y1 - n.y0,
textTransform: {
x: n.depth > 0 ? n.x1 + Ht : n.x0 - Ht,
y: (n.y1 + n.y0) / 2
},
node: n
};
});
}
function Ba(e) {
return [e.source.x1, e.y0];
}
function Ma(e) {
return [e.target.x0, e.y1];
}
function Ra(e) {
return e.curveFunction ? gn(e.curveFunction).source(Ba).target(Ma) : vn();
}
function Sa(e) {
return e.map((n) => {
var t;
return {
id: n.id,
color: n.color || ((t = n.source) == null ? void 0 : t.color) || Ge,
d: Ra(n)(n),
strokeWidth: Math.max(1, n.width),
link: n
};
});
}
function Rt(e, n, t, o, a) {
if (o === !1) {
e.node = {
...e.node,
transitionValue: a ? void 0 : t
};
return;
}
const u = Date.now(), l = Nn(n, t), i = () => {
let s = (Date.now() - u) / wa;
s > 1 && (s = 1), e.node = {
...e.node,
transitionValue: a && s === 1 ? void 0 : l(s)
}, s < 1 && requestAnimationFrame(i);
};
requestAnimationFrame(i);
}
const Ga = {
nodes: [],
links: []
};
function St(e, n) {
return n.find((t) => t.every((o) => o.x0 === e.x0));
}
function ja(e, n, t) {
const o = S(null), a = v(() => {
var r, f;
return (f = (r = e.value) == null ? void 0 : r[0]) == null ? void 0 : f.values.map(
({ label: y, color: p, value: b, deriveColorFromIncomingLinks: $, offset: L }) => ({
label: y || b.toString(),
color: p,
fallbackColor: p || Ge,
id: b,
deriveColorFromIncomingLinks: $,
offset: L
})
);
}), u = v(
() => {
var r, f;
return (f = (r = e.value) == null ? void 0 : r[0]) == null ? void 0 : f.values.map(
(y) => {
var p;
return (p = y.targets) == null ? void 0 : p.map(
({ node: b, value: $, color: L, curveFunction: g }) => ({
id: `${y.value}:${b}`,
color: L,
curveFunction: g,
source: y.value ?? y.label,
target: b,
value: $
})
);
}
).filter(Boolean).flat();
}
), l = v(() => fn().nodeId(Ie).nodeAlign(n.value.nodeAlign).nodePadding(n.value.nodePadding).nodeSort(n.value.nodeSort).nodeWidth(n.value.nodeWidth).linkSort(n.value.linkSort).iterations(n.value.iterations)), i = v(() => {
var r;
return (r = o.value) == null ? void 0 : r.nodes.reduce(
(f, y) => {
const p = St(y, f);
return p ? (p.push(y), p.sort((b, $) => (b._y0 || b.y0) - ($._y0 || $.y0))) : f.push([y]), f;
},
[]
);
});
function c(r) {
const { offset: f } = r, y = St(r, i.value);
if (!y) return;
const p = y[y.findIndex(($) => $.id === r.id) - 1], b = p && y.length !== 1 ? p.y1 + f : f;
r._y0 = r.y0, r._y1 = r.y1, r.y0 = b, r.y1 = r.y0 + (r._y1 - r._y0);
}
function s(r, f) {
const { id: y, _y0: p, y0: b } = r, $ = f.links.filter(
(O) => O.source.id === y
), L = f.links.filter(
(O) => O.target.id === y
), g = b - p;
$.forEach((O) => O.y0 += g), L.forEach((O) => O.y1 += g);
}
const m = v(() => {
var r;
return o.value && ((r = a.value) == null || r.forEach((f) => {
f.value === 0 && (f.fallbackColor = ft.Grey), typeof f.offset == "number" && (c(f), s(f, o.value));
})), o.value;
});
return X([l, t], () => {
try {
const { x0: r, y0: f, x1: y, y1: p } = t.value;
o.value = l.value.extent([
[r, f],
[y, p]
])({ nodes: a.value, links: u.value });
} catch (r) {
ut(Pe.GraphProblem, r), o.value = Ga;
}
}), { columns: i, graph: m };
}
function rt(e, n) {
return n || (n = {}), e.targetLinks && e.targetLinks.forEach(({ source: t, value: o }) => {
n[t.id] = o, rt(
t,
n
);
}), n;
}
function it(e, n) {
return n || (n = {}), e.sourceLinks && e.sourceLinks.forEach(({ target: t, value: o }) => {
n[t.id] = o, it(
t,
n
);
}), n;
}
function Va(e, n) {
return n.links.reduce((t, o) => (o.source.id in e && o.target.id in e && t.push(o.id), t), []);
}
const Pa = (e, n) => {
let t;
tn(e) ? t = {
[e.id]: e.value,
...rt(e),
...it(e)
} : t = {
[e.source.id]: e.source.value,
[e.target.id]: e.target.value,
...rt(e.source),
...it(e.target)
};
const o = Va(t, n);
return { nodes: t, links: o };
}, Ca = (e) => {
if (tn(e)) {
const n = [...e.sourceLinks, ...e.targetLinks];
return {
nodes: n.reduce(
(t, { source: o, target: a, value: u }) => o === e ? { ...t, [Ie(a)]: u } : { ...t, [Ie(o)]: u },
{ [Ie(e)]: e.value }
),
links: n.map(({ id: t }) => t)
};
}
return {
nodes: {
[Ie(e.target)]: e.value,
[Ie(e.source)]: e.source.value
},
links: [e.id]
};
};
function Fa(e, n, t) {
const o = S(null), a = v(() => o.value ? typeof n.value.highlightedElements == "function" ? n.value.highlightedElements(
o.value,
t.value
) : n.value.highlightedElements === "closest" ? Ca(o.value, t.value) : Pa(o.value, t.value) : { nodes: {}, links: [] });
return X(a, (u, l) => {
if (u.links.length === 0 && Object.keys(u.nodes).length === 0) {
e.value.forEach((i) => {
i.node.id in l.nodes && Rt(
i,
l.nodes[i.node.id],
i.node.value,
n.value.withTransition,
!0
);
});
return;
}
e.value.forEach((i) => {
i.node.id in u.nodes && Rt(
i,
i.node.value,
u.nodes[i.node.id],
n.value.withTransition
);
});
}), { highlightedElements: a, hoveredElement: o };
}
const za = {
class: "lume-alluvial-group",
"data-j-alluvial-group": ""
}, Wa = { key: 0 }, Za = { key: 0 }, Ua = ["id", "x1", "x2"], Xa = ["stop-color"], Ya = ["stop-color"], Ka = ["d", "stroke-width", "onClick", "onMouseover"], Ja = ["d", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-width", "data-id", "onClick", "onMouseover"], Qa = ["onClick", "onMouseenter", "onMouseleave", "onMouseover"], qa = ["x", "y", "height", "width"], el = ["transform", "data-id", "width"], tl = /* @__PURE__ */ Z({
__name: "lume-alluvial-group",
props: {
...We(),
hoveredElementId: {
type: [Number, String],
default: null
}
},
emits: ["node-click", "node-mouseenter", "node-mouseleave", "link-click", "link-mouseenter", "link-mouseleave"],
setup(e, { emit: n }) {
const t = e, o = n, a = Ce("chartID"), { data: u, options: l } = ee(t), i = S([]), c = S([]), s = S(null), { extents: m, updateExtents: r } = Ia(t.containerSize), { columns: f, graph: y } = ja(u, l, m), { hoveredElement: p, highlightedElements: b } = Fa(
i,
l,
y
), $ = v(() => Ve(l.value.valueFormat)), L = v(
() => Object.keys(b.value.nodes)
), g = v(() => f.value ? f.value.map(
(k) => k[0].x0 + l.value.nodeWidth / 2
) : []), O = v(() => {
if (!(!l.value.nodeHeaders || !l.value.nodeHeaders.length))
return l.value.nodeHeaders.slice(0, g.value.length).map((k, E) => ({
label: k,
x: g.value[E]
}));
}), N = v(
() => l.value.nodeHeaderPadding ?? fa
), D = v(() => {
if (!(!l.value.gradient || !y.value))
return y.value.links.reduce((k, E) => {
const { source: h, target: R } = E, F = h.color || h.fallbackColor, le = R.deriveColorFromIncomingLinks ? F : R.color || R.fallbackColor;
return k[E.id] = {
source: F,
target: le,
x1: h.x1,
x2: R.x0
}, k;
}, {});
}), P = v(() => {
const k = i.value.filter(
(h) => C(h)
), E = [];
return k.forEach((h) => {
const R = [];
c.value.filter(({ link: F }) => F.target.id === h.node.id).reverse().reduce((F, le, De, Ze) => {
const Ue = le.link.target.y1 - le.link.target.y0 > xe;
let $e, He, Oe;
return Ue ? ($e = le.link.target.y1 - le.link.target.y0, He = le.link.value / h.node.value, Oe = He * $e) : ($e = xe, Oe = xe / Ze.length), R.push({
x: h.x,
y: h.y + F,
height: Oe,
width: h.width,
key: `node-block-${h.node.id}-source-link-${le.link.source.id}`,
class: `lume-alluvial-group__node-block lume-fill--${le.link.source.color || Ge}`
}), F + Oe;
}, 0), E.push({
id: h.node.id,
subNodes: R
});
}), E;
});
function w(k) {
return l.value.gradient && `url('#${a}_${k.id}')`;
}
function B(k) {
return L.value.length > 0 && !L.value.includes(k.toString());
}
function U(k) {
return L.value.length > 0 && L.value.includes(k.toString());
}
function K(k) {
return b.value.links.length > 0 && !b.value.links.includes(k);
}
function J(k) {
return b.value.links.length > 0 && b.value.links.includes(k);
}
function C(k) {
return !k.node.color && k.node.deriveColorFromIncomingLinks;
}
function ae(k, E) {
k !== p.value && (p.value = k, o("link-mouseenter", { link: k, event: E }));
}
function Ne(k) {
const E = p.value;
p.value = null, o("link-mouseleave", { link: E, event: k });
}
function me(k) {
if (k == null) {
p.value = null;
return;
}
const E = Ea(k, y.value) || Na(k, y.value);
if (!E) {
ge(ve.InvalidHoveredElement);
return;
}
p.value = E;
}
function Te(k) {
var E;
return ((E = P.value.find(({ id: h }) => k === h)) == null ? void 0 : E.subNodes) ?? [];
}
function Le() {
const k = Da(y.value, s.value);
r(k);
}
return X(y, (k) => {
i.value = Ha(k.nodes), c.value = Sa(k.links).reverse(), p.value == null && t.hoveredElementId != null && me(t.hoveredElementId);
}), X([t.containerSize, s], () => {
t.containerSize.width && t.containerSize.height && Le();
}), X(() => t.hoveredElementId, me), (k, E) => (_(), I("g", za, [
O.value ? (_(), I("g", Wa, [
(_(!0), I(Q, null, W(O.value, (h, R) => M(k.$slots, `node-header-${R}`, {
x: h.x,
y: -N.value
}, () => [
(_(), Y(d(Oa), {
key: `header_${h.x}`,
x: h.x,
y: -N.value
}, {
default: V(() => [
se(ne(h.label), 1)
]),
_: 2
}, 1032, ["x", "y"]))
], !0)), 256))
])) : z("", !0),
G("g", {
class: "lume-alluvial-link-group",
onMouseleave: Ne
}, [
d(l).gradient ? (_(), I("defs", Za, [
(_(!0), I(Q, null, W(D.value, (h, R) => (_(), I("linearGradient", {
id: `${d(a)}_${R}`,
key: R,
gradientUnits: "userSpaceOnUse",
x1: h.x1,
x2: h.x2
}, [
G("stop", {
offset: "0%",
"stop-color": `var(--lume-color--${h.source})`
}, null, 8, Xa),
G("stop", {
offset: "100%",
"stop-color": `var(--lume-color--${h.target})`
}, null, 8, Ya)
], 8, Ua))), 128))
])) : z("", !0),
(_(!0), I(Q, null, W(c.value, (h) => (_(), I("path", {
key: `link-ghost_${h.id}`,
class: te(["lume-alluvial-group__link", [
"lume-stroke--transparent",
"lume-alluvial-group__link--ghost"
]]),
d: h.d,
"stroke-width": h.strokeWidth + d(va),
"data-j-alluvial-ghost": "",
onClick: (R) => o("link-click", { link: h.link, event: R }),
onMouseover: (R) => ae(h.link, R)
}, null, 40, Ka))), 128)),
(_(!0), I(Q, null, W(c.value, (h) => (_(), I("path", {
key: `link_${h.id}`,
class: te(["lume-alluvial-group__link", {
[`lume-stroke--${h.color}`]: !d(l).gradient && h.color,
"lume-alluvial-group__link--faded": K(h.id),
"lume-alluvial-group__link--focused": J(h.id)
}]),
d: h.d,
stroke: w(h.link),
"stroke-dasharray": k.containerSize.width,
"stroke-dashoffset": k.containerSize.width,
"stroke-width": h.strokeWidth,
"data-j-alluvial-path": "",
"data-id": h.id,
onClick: (R) => o("link-click", { link: h.link, event: R }),
onMouseover: (R) => ae(h.link, R)
}, null, 42, Ja))), 128))
], 32),
(_(!0), I(Q, null, W(i.value, (h, R) => (_(), I("g", {
key: `node-block_${R}`,
class: te(["lume-alluvial-group__node", {
"lume-alluvial-group__node--faded": B(h.node.id),
"lume-alluvial-group__node--focused": U(h.node.id)
}]),
"data-j-alluvial-group__node-block": ""
}, [
G("g", {
onClick: (F) => o("node-click", { node: h.node, event: F }),
onMouseenter: (F) => o("node-mouseenter", { node: h.node, event: F }),
onMouseleave: (F) => o("node-mouseleave", { node: h.node, event: F }),
onMouseover: (F) => p.value = h.node,
onMouseout: E[0] || (E[0] = (F) => p.value = null)
}, [
C(h) ? (_(!0), I(Q, { key: 0 }, W(Te(
h.node.id
), (F) => (_(), I("rect", j(F, {
key: F.key,
"data-j-alluvial-sub-nodes": ""
}), null, 16))), 128)) : (_(), I("rect", {
key: 1,
class: te(["lume-alluvial-group__node-block", `lume-fill--${h.node.color || h.node.fallbackColor}`]),
x: h.x,
y: h.y,
height: h.height,
width: h.width
}, null, 10, qa)),
G("g", {
ref_for: !0,
ref_key: "nodeTextRefs",
ref: s,
class: te(["lume-alluvial-group__node-text lume-typography--caption", {
"lume-alluvial-group__node-text--left": h.node.depth === 0
}]),
transform: `translate(${h.textTransform.x},${h.textTransform.y})`,
"data-id": h.node.id,
width: d(l).nodeLabelMaxWidth
}, [
M(k.$slots, `node-text-${h.node.id}`, {
node: h.node,
value: $.value(
h.node.transitionValue || h.node.value,
h.node.value
)
}, () => [
re(d(ya), {
bottom: d(l).switchText,
left: h.node.depth === 0,
"max-width": d(l).nodeLabelMaxWidth,
"onLume__internal-NodeResize": Le
}, {
default: V(() => [
se(ne(h.node.label), 1)
]),
_: 2
}, 1032, ["bottom", "left", "max-width"]),
re(d(ba), {
bottom: !d(l).switchText
}, {
default: V(() => [
se(ne($.value(
h.node.transitionValue || h.node.value,
h.node.value
)), 1)
]),
_: 2
}, 1032, ["bottom"])
], !0)
], 10, el)
], 40, Qa)
], 2))), 128))
]));
}
}), nl = /* @__PURE__ */ q(tl, [["__scopeId", "data-v-ea53c3da"]]), ol = {
margins: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
withAxes: !1,
withTooltip: !1,
withHover: !1,
withLegend: !1,
// Alluvial options
gradient: !1,
highlightedElements: "closest",
nodePadding: 16,
nodeWidth: 16,
nodeAlign: mn,
valueFormat: (e) => String(e),
iterations: 6
}, Zl = /* @__PURE__ */ Z({
__name: "lume-alluvial-diagram",
props: {
...po(st)
},
setup(e, { emit: n }) {
const t = e, { componentEventPropagator: o } = _e(), a = Ae(ue()), u = Hn(ue()), { options: l } = ee(t), { allOptions: i } = fe(l, ol);
function c(s) {
return {
...s,
noBaseScales: !0
// Alluvial chart never uses base scales
};
}
return (s, m) => (_(), Y(d(Ee), j({ ...t, ...s.$attrs }, {
options: c(d(i)),
"data-j-alluvial-diagram": ""
}, oe(d(o))), ce({
groups: V((r) => [
re(d(nl), j(r, { "hovered-element-id": s.hoveredElement }, oe(d(o))), ce({ _: 2 }, [
W(d(u), (f, y) => ({
name: y,
fn: V((p) => [
M(s.$slots, y, pe(he(p || {})))
])
}))
]), 1040, ["hovered-element-id"])
]),
_: 2
}, [
W(d(a), (r, f) => ({
name: f,
fn: V((y) => [
M(s.$slots, f, pe(he(y || {})))
])
}))
]), 1040, ["options"]));
}
});
var nn = /* @__PURE__ */ ((e) => (e.grouped = "grouped", e.stacked = "stacked", e))(nn || {});
const Ul = /* @__PURE__ */ Z({
__name: "lume-bar-chart",
props: {
...we(),
type: {
type: String,
default: null,
validator: (e) => e in nn || e == null
}
},
setup(e, { emit: n }) {
const t = Je(
() => import("./DI0JiGP5.js")
), o = Je(
() => import("./DgbGPOnI.js")
), a = Je(
() => import("./D3C1hTl9.js")
), u = /* @__PURE__ */ new Map([
["single", t],
["grouped", o],
["stacked", a]
]), l = e, { componentEventPropagator: i } = _e(), c = Ae(ue());
function s(r) {
return {
...r,
startOnZero: !0,
// Bar chart always starts on zero,
tooltipOptions: {
...(r == null ? void 0 : r.tooltipOptions) || {},
position: l.orientation === H.HORIZONTAL ? "right" : void 0
}
};
}
const m = v(() => {
if (st(l.data)) return u.get("single");
if (!l.type)
throw new Error("Bar chart needs a type when there's multiple datasets.");
return u.get(l.type);
});
return (r, f) => (_(), Y(dn(m.value), j({ ...l, ...r.$attrs }, {
options: s(r.options)
}, oe(d(i))), ce({ _: 2 }, [
W(d(c), (y, p) => ({
name: p,
fn: V((b) => [
M(r.$slots, p, pe(he(b || {})))
])
}))
]), 1040, ["options"]));
}
});
function al(e) {
return Object.values(Gn).includes(e) || e == null;
}
function ll(e) {
return Object.values(H).includes(e);
}
const ul = (e = !1) => ({
type: {
type: String,
default: null,
validator: al
},
...e ? {
orientation: {
type: String,
default: H.VERTICAL,
validator: ll
}
} : {}
});
function on(e, n) {
const t = v(() => e.value.map((a) => {
var u;
return {
...a,
values: ct(
a.values,
((u = n == null ? void 0 : n.value) == null ? void 0 : u.length) ?? 0
).map((l) => ({
...l,
value: (l == null ? void 0 : l.value) || 0
}))
};
})), o = v(() => {
var a;
return (a = t.value) == null ? void 0 : a.reduce((u, l) => (l.values.forEach((i, c) => {
u[c] ? u[c].push(i) : u[c] = [i];
}), u), []);
});
return { multiBarData: t, groupedData: o };
}
function rl(e, n) {
return e.value.length === 1 ? "single" : n.value;
}
function il(e, n, t) {
const o = v(
() => t.value === H.HORIZONTAL
);
function a(i) {
i || ut(Pe.BarScaleNull), Math.min(...i.domain()) > 0 && ut(Pe.BarScaleDomainAbove0);
}
const u = v(() => o.value ? (a(e.value), e.value) : e.value), l = v(() => o.value ? n.value : (a(n.value), n.value));
return { barXScale: u, barYScale: l };
}
const sl = {
x: 0,
y: 0,
width: 0,
height: 0
};
function cl(e, n, t, o, a, u) {
const l = v(
() => o.value === H.HORIZONTAL
);
function i(r, f) {
let y, p;
return l.value ? (y = r >= 0 ? n.value(0) : n.value(r), p = t.value(t.value.domain()[f])) : (y = n.value(n.value.domain()[f]), p = r < 0 ? t.value(0) : t.value(r)), { x: y, y: p };
}
function c(r) {
return l.value ? r < 0 ? n.value(0) - n.value(r) : n.value(r) - n.value(0) : n.value.bandwidth();
}
function s(r) {
return l.value ? t.value.bandwidth() : r < 0 ? t.value(r) - t.value(0) : t.value(0) - t.value(r);
}
function m(r, f, y) {
if (!(n.value && t.value)) return sl;
const { value: b, color: $ } = r, L = $ ?? e.value[f].color ?? Ge, { x: g, y: O } = i(b, y), N = c(b), D = s(b);
return {
classList: [`lume-fill--${L}`, ...u],
x: g,
y: O,
width: N,
height: D,
isFaded: a.value !== -1 && a.value !== y,
isNegative: b < 0
};
}
return { barAttributeGenerator: m };
}
const dl = {
x: 0,
y: 0,
width: 0,
height: 0
};
function vl(e, n, t, o, a, u) {
const l = v(
() => o.value === H.HORIZONTAL
), i = v(() => Be().domain(e.value.map((p, b) => b)).range([0, n.value.bandwidth()]).padding(0)), c = v(() => Be().domain(e.value.map((p, b) => b)).range([0, t.value.bandwidth()]).padding(0));
function s(p, b, $) {
if (l.value)
return p >= 0 ? n.value(0) : n.value(p);
const L = n.value.domain();
return n.value(L[b]) + i.value($);
}
function m(p, b, $) {
if (l.value) {
const L = t.value.domain();
return t.value(L[b]) + c.value($);
}
return p < 0 ? t.value(0) : t.value(p);
}
function r(p) {
return l.value ? p < 0 ? n.value(0) - n.value(p) : n.value(p) - n.value(0) : i.value.bandwidth();
}
function f(p) {
return l.value ? c.value.bandwidth() : p < 0 ? t.value(p) - t.value(0) : t.value(0) - t.value(p);
}
function y(p, b, $) {
if (!(n.value && t.value)) return dl;
const { value: g, color: O } = p, N = O ?? e.value[b].color ?? Object.values(ie)[b], D = s(g, $, b), P = m(g, $, b), w = r(g), B = f(g);
return {
classList: [`lume-fill--${N}`, ...u],
x: D,
y: P,
width: w,
height: B,
isFaded: a.value !== -1 && a.value !== $,
isNegative: g < 0
};
}
return { barAttributeGenerator: y };
}
function fl(e, n, t) {
const o = v(
() => n.value === H.HORIZONTAL
), a = v(() => {
const c = e.value.map(
(s) => s.filter((m) => m.value < 0).reduce((m, r) => m + r.value, 0)
);
return Math.min(...c);
}), u = v(() => {
const c = e.value.map(
(s) => s.reduce(
(m, r) => r.value >= 0 ? m + r.value : m,
0
)
);
return Math.max(...c);
});
function l(c, s, m) {
return s.length ? o.value ? Me().domain([a.value, u.value]).range([0, m.width]) : Object.assign(
Et(
Be().domain(s.map((r, f) => f)).range([0, m.width]),
n.value,
t.value
),
{ labels: s }
) : null;
}
function i(c, s, m) {
return s.length ? o.value ? Object.assign(
Et(
Be().domain(s.map((r, f) => f)).range([0, m.height]),
n.value,
t.value
),
{ labels: s }
) : Me().domain([u.value, a.value]).range([0, m.height]) : null;
}
return { stackedXScaleGenerator: l, stackedYScaleGenerator: i };
}
function ml(e, n, t, o, a, u) {
const l = v(
() => o.value === H.HORIZONTAL
), i = v(
() => l.value ? t.value.domain() : n.value.domain()
), c = v(
() => e.value.map((L) => L.values.map((g) => g == null ? void 0 : g.value))
);
function s(L, g, O) {
let N, D;
return l.value ? (N = n.value(L >= 0 ? 0 + O : L + O), D = t.value(i.value[g])) : (N = n.value(i.value[g]), D = t.value(L >= 0 ? L + O : 0 + O)), { x: N, y: D };
}
function m(L) {
return l.value ? n.value(L) - n.value(0) : n.value.bandwidth();
}
function r(L) {
return l.value ? n.value(0) - n.value(L) : n.value.bandwidth();
}
function f(L) {
return l.value ? t.value.bandwidth() : t.value(0) - t.value(L);
}
function y(L) {
return l.value ? t.value.bandwidth() : t.value(L) - t.value(0);
}
function p(L, g) {
return L ? c.value.reduce((O, N, D) => (D < L && N[g] >= 0 && (O += N[g]), O), 0) : 0;
}
function b(L, g) {
return L ? c.value.reduce((O, N, D) => (D < L && N[g] < 0 && (O += N[g]), O), 0) : 0;
}
function $(L, g, O) {
const { value: N, color: D } = L, P = N >= 0 ? m(N) : r(N), w = N >= 0 ? f(N) : y(N), B = N >= 0 ? p(g, O) : b(g, O), { x: U, y: K } = s(N, O, B);
return {
classList: [`lume-fill--${D ?? e.value[g].color ?? Object.values(ie)[g]}`, ...u],
width: P,
height: w,
x: U,
y: K,
isFaded: a.value !== -1 && a.value !== O,
isNegative: N < 0
};
}
return { barAttributeGenerator: $ };
}
const pl = {
class: "lume-bar-group",
"data-j-bars-group": ""
}, hl = ["onMouseenter"], gl = {
single: cl,
grouped: vl,
stacked: ml
}, yt = /* @__PURE__ */ Z({
__name: "lume-bar-group",
props: {
...We(),
classList: {
type: [String, Array],
default: () => []
},
...ul(!0),
transition: {
type: Boolean,
default: !0
}
},
emits: ["bar-click", "lume__internal--hover"],
setup(e, { emit: n }) {
const t = e, o = n, {
data: a,
hoveredIndex: u,
orientation: l,
transition: i,
type: c,
xScale: s,
yScale: m,
classList: r,
labels: f
} = ee(t);
Ce("chartID");
const { emitInternalEvent: y } = _e(), { groupedData: p } = on(a, f), { barXScale: b, barYScale: $ } = il(s, m, l), L = v(() => typeof r.value == "string" ? [r.value] : r.value), g = v(() => {
const D = rl(a, c), { barAttributeGenerator: P } = gl[D](
a,
b,
$,
l,
u,
L.value
);
return P;
}), O = v(() => {
if (i.value)
return l.value === H.HORIZONTAL ? "width" : "height";
});
async function N(D) {
o("lume__internal--hover", D), y("lume__internal--hover", D);
}
return (D, P) => (_(), I("g", pl, [
(_(!0), I(Q, null, W(d(p), (w, B) => (_(), I("g", {
key: B,
onMouseenter: (U) => N(B)
}, [
(_(!0), I(Q, null, W(w, (U, K) => (_(), Y(d(dt), j(g.value(U, K, B, w), {
key: `bar-${K}`,
transition: O.value,
"data-j-lume-bar": "",
onClick: (J) => o("bar-click", {
index: B,
datasetIndex: K,
event: J
})
}), null, 16, ["transition", "onClick"]))), 128))
], 40, hl))), 128))
]));
}
}), yl = {
[H.VERTICAL]: {
withTooltip: !0,
xAxisOptions: {},
yAxisOptions: { gridLines: !0 },
margins: be.VERTICAL
},
[H.HORIZONTAL]: {
withTooltip: !0,
xAxisOptions: { gridLines: !0 },
yAxisOptions: { gridLines: !1 },
margins: be.HORIZONTAL
}
}, Xl = /* @__PURE__ */ Z({
__name: "lume-single-bar-chart",
props: {
...we(st)
},
setup(e, { emit: n }) {
const t = e, { componentEventPropagator: o } = _e(), a = Ae(ue()), { orientation: u, options: l } = ee(t), i = v(
() => yl[u.value || H.VERTICAL]
// needs to be computed so that default options are reactive
), { allOptions: c } = fe(l, i);
return (s, m) => (_(), Y(d(Ee), j({ ...t, ...s.$attrs }, {
"chart-type": "single-bar",
options: d(c),
"data-j-single-bar-chart": ""
}, oe(d(o))), ce({
groups: V((r) => [
re(d(yt), j(r, { orientation: d(u) }, oe(d(o))), null, 16, ["orientation"])
]),
_: 2
}, [
W(d(a), (r, f) => ({
name: f,
fn: V((y) => [
M(s.$slots, f, pe(he(y || {})))
])
}))
]), 1040, ["options"]));
}
}), _l = {
[H.VERTICAL]: {
withTooltip: !0,
xAxisOptions: {},
yAxisOptions: { gridLines: !0 },
margins: be.VERTICAL
},
[H.HORIZONTAL]: {
withTooltip: !0,
xAxisOptions: { gridLines: !0 },
yAxisOptions: { gridLines: !1 },
margins: be.HORIZONTAL,
tooltipOptions: { position: "right" }
}
}, Yl = /* @__PURE__ */ Z({
__name: "lume-grouped-bar-chart",
props: {
...we()
},
setup(e, { emit: n }) {
const t = e, { componentEventPropagator: o } = _e(), a = Ae(ue()), { orientation: u, options: l } = ee(t), i = v(
() => _l[u.value || H.VERTICAL]
// needs to be computed so that default options are reactive
), { allOptions: c } = fe(
l,
i
);
return (s, m) => (_(), Y(d(Ee), j({ ...t, ...s.$attrs }, {
"chart-type": "grouped-bar",
options: d(c),
"data-j-grouped-bar-chart": ""
}, oe(d(o))), ce({
groups: V((r) => [
re(d(yt), j(r, { type: "grouped" }, oe(d(o))), null, 16)
]),
_: 2
}, [
W(d(a), (r, f) => ({
name: f,
fn: V((y) => [
M(s.$slots, f, pe(he(y || {})))
])
}))
]), 1040, ["options"]));
}
}), kl = {
[H.VERTICAL]: {
withTooltip: !0,
xAxisOptions: {},
yAxisOptions: { gridLines: !0 },
margins: be.VERTICAL,
tooltipOptions: { inverse: !0 }
},
[H.HORIZONTAL]: {
withTooltip: !0,
xAxisOptions: { gridLines: !0 },
yAxisOptions: { gridLines: !1 },
margins: be.HORIZONTAL,
tooltipOptions: { position: "right" }
}
}, Kl = /* @__PURE__ */ Z({
__name: "lume-stacked-bar-chart",
props: {
...we()
},
setup(e, { emit: n }) {
const t = e, { componentEventPropagator: o } = _e(), a = Ae(ue()), { data: u, orientation: l, options: i, labels: c } = ee(t), s = v(
() => kl[l.value || H.VERTICAL]
// needs to be computed so that default options are reactive
), { allOptions: m } = fe(
i,
s
), { internalData: r } = ht(u), { groupedData: f } = on(r, c), { stackedXScaleGenerator: y, stackedYScaleGenerator: p } = fl(
f,
l,
i
), b = v(() => t.xScale || y), $ = v(() => t.yScale || p);
return (L, g) => (_(), Y(d(Ee), j({ ...t, ...L.$attrs }, {
"chart-type": "stacked-bar",
options: d(m),
"x-scale": b.value,
"y-scale": $.value,
"data-j-stacked-bar-chart": ""
}, oe(d(o))), ce({
groups: V((O) => [
re(d(yt), j(O, { type: "stacked" }, oe(d(o))), null, 16)
]),
_: 2
}, [
W(d(a), (O, N) => ({
name: N,
fn: V((D) => [
M(L.$slots, N, pe(he(D || {})))
])
}))
]), 1040, ["options", "x-scale", "y-scale"]));
}
}), bl = ["d", "stroke-width"], Al = 2, Tl = /* @__PURE__ */ Z({
__name: "lume-line",
props: {
pathDefinition: {
type: String,
required: !0
},
width: {
type: Number,
default: Al
},
color: {
type: String,
default: ie.Skyblue
},
dashed: {
type: Boolean,
default: !1
},
transition: {
type: Boolean,
default: !0
},
animationDelay: {
type: Number,
default: 0
},
animationDuration: {
type: Number,
default: 0.2
}
},
emits: ["click"],
setup(e, { emit: n }) {
const t = n, o = S(null);
return ye(() => ze(o.value)), (a, u) => (_(), I("path", {
ref_key: "root",
ref: o,
class: te(["lume-line", {
[`lume-stroke--${e.color}`]: !0,
"lume-line--dashed": e.dashed,
"lume-line--transition": e.transition
}]),
d: e.pathDefinition,
"stroke-width": e.width,
style: jt({
animationDelay: e.transition && e.animationDelay + "s",
animationDuration: e.transition && e.animationDuration + "s"
}),
"data-j-line": "",
onClick: u[0] || (u[0] = (l) => t("click", l))
}, null, 14, bl));
}
}), Ll = /* @__PURE__ */ q(Tl, [["__scopeId", "data-v-59449838"]]), $l = ["cx", "cy", "r", "stroke-width"], Ol = 4, Il = /* @__PURE__ */ Z({
__name: "lume-point",
props: {
x: { type: Number, required: !0 },
y: { type: Number, required: !0 },
color: {
type: String,
default: ie.Skyblue
},
radius: {
type: Number,
default: Ol
},
active: {
type: Boolean,
default: !1
}
},
emits: ["click"],
setup(e, { emit: n }) {
const t = e, o = n, a = S(null), u = v(() => t.radius / 2);
return ye(() => ze(a.value)), (l, i) => (_(), I("circle", {
ref_key: "root",
ref: a,
class: te(["lume-point", `lume-stroke--${e.color}`]),
cx: e.x,
cy: e.y,
r: e.active ? e.radius : 0,
"stroke-width": u.value,
"data-j-point": "",
onClick: i[0] || (i[0] = (c) => o("click", c))
}, null, 10, $l));
}
}), xl = /* @__PURE__ */ q(Il, [["__scopeId", "data-v-436fef87"]]);
function an(e) {
function n(u) {
let l = null;
return u == null ? void 0 : u.reduce((i, c, s) => (c == null || c.value == null ? (l ? l.push(s) : l = [s], s === (u == null ? void 0 : u.length) - 1 && i.push(l)) : l && (i.push(l), l = null), i), []);
}
function t(u, l, i, c) {
const r = Math.abs(u - l) / (i + 1) * (c + 1);
return u == null && l == null ? null : u > l ? u - r : u + r;
}
function o(u) {
return function(i) {
return !!u.find(
(c) => c.includes(i) || c.includes(i - 1)
);
};
}
return { computedLineData: v(() => e.value.map((u) => {
const l = n(u.values);
return {
...u,
isDashed: o(l),
values: u.values.map((i, c) => {
var m, r;
const s = l.find(
(f) => f.includes(c)
);
if (s) {
const f = s[0] - 1, y = s[s.length - 1] + 1;
let p = (m = u.values[f]) == null ? void 0 : m.value, b = (r = u.values[y]) == null ? void 0 : r.value;
return p == null && (p = b), b == null && (b = p), {
value: t(
p,
b,
s.length,
s.indexOf(c)
),
label: Zt
};
}
return i;
})
};
})) };
}
function wl(e, n) {
const t = e.bandwidth() / 2;
return (o, a) => e(e.domain()[n + (a - 1)]) + t;
}
function El(e, n) {
return (t, o) => e(n + (o - 1));
}
function Nl(e, n, t, o) {
const a = yn().x(
de(t) ? wl(t, e) : El(t, e)
).y((u) => o(u));
return n.every((u) => u == null) ? null : a(n);
}
const Dl = {
class: "lume-line-group",
"data-j-lume-line-group": ""
}, Hl = { class: "lume-line-group__lines" }, Bl = {
key: 0,
class: "lume-line-group__points",
"data-j-lume-line-group__points": ""
}, Ml = 1, Rl = /* @__PURE__ */ Z({
__name: "lume-line-group",
props: {
...We(),
withPoints: {
type: Boolean,
default: !0
},
transition: {
type: Boolean,
default: !0
}
},
emits: ["line-click", "point-click", "lume__internal--hover"],
setup(e, { emit: n }) {
const t = e, o = n, { data: a, options: u, xScale: l, yScale: i, labels: c } = ee(t), s = Ce(
"tooltipAnchorAttributes",
null
), { updateTooltipAnchorAttributes: m } = en(
s,
u,
l,
i,
c
), r = v(() => {
if (a.value.every((B) => B.isDashed))
return a.value;
const { computedLineData: w } = an(a);
return u.value.withTooltip !== !1 && (s != null && s.value) && m(w.value), w.value;
}), f = v(() => {
if (t.hoveredIndex === -1) return;
const w = wn(
r.value,
t.hoveredIndex
);
return {
d: `M ${tt(l.value, t.hoveredIndex)},${i.value.range()[1]}
V ${i.value(w)}`
// Move to X index, Vertical line to the highest point
};
}), y = v(
() => l.value && Ml / (En(l.value) - 1)
// Subtracting the first line (read below)
), p = v(
() => {
var w;
return ((w = u.value) == null ? void 0 : w.lineWidth) * 2 || void 0;
}
// If no `lineWidth`, returns NaN which needs to be undefined
), b = v(
() => l.value.bandwidth() / 2
), $ = v(() => l.value.domain()), L = v(
() => u.value.withPoints ?? t.withPoints
);
function g(w) {
return r.value[w].values;
}
function O(w, B) {
var K, J;
const U = w === 0 ? [] : [
(K = g(B)[w - 1]) == null ? void 0 : K.value,
(J = g(B)[w]) == null ? void 0 : J.value
];
return Nl(
w,
U,
l.value,
i.value
) || "";
}
function N(w) {
return {
animationDelay: w < 2 ? 0 : (w - 1) * y.value,
animationDuration: y.value
};
}
function D(w, B) {
var K;
const U = (K = g(B)[w]) == null ? void 0 : K.value;
return {
x: de(l.value) ? t.xScale($.value[w]) + b.value : t.xScale(w),
y: U === null ? i.value(i.value.domain()[1]) : i.value(U)
};
}
function P(w) {
return t.hoveredIndex === w;
}
return (w, B) => (_(), I("g", Dl, [
G("path", j(f.value, {
class: "lume-line-group__overlay-line",
"data-j-lume-line-group__overlay-line": ""
}), null, 16),
(_(!0), I(Q, null, W(r.value, (U, K) => (_(), I("g", {
key: U.label,
class: "lume-line-group__group"
}, [
G("g", Hl, [
(_(!0), I(Q, null, W(U.values, (J, C) => (_(), Y(d(Ll), j(N(C), {
key: `line-${C}`,
color: U.color,
dashed: U.isDashed(C),
"path-definition": O(C, K),
transition: e.transition,
width: d(u).lineWidth,
onClick: (ae) => o("line-click", { index: C, datasetIndex: K, event: ae })
}), null, 16, ["color", "dashed", "path-definition", "transition", "width", "onClick"]))), 128))
]),
L.value ? (_(), I("g", Bl, [
(_(!0), I(Q, null, W(U.values, (J, C) => (_(), Y(d(xl), j(D(C, K), {
key: `point-${C}`,
active: P(C),
color: U.color,
index: C,
radius: p.value,
onClick: (ae) => o("point-click", { index: C, datasetIndex: K, event: ae })
}), null, 16, ["active", "color", "index", "radius", "onClick"]))), 128))
])) : z("", !0)
]))), 128))
]));
}
}), ln = /* @__PURE__ */ q(Rl, [["__scopeId", "data-v-23492507"]]), Sl = {
margins: be.VERTICAL,
startOnZero: !0,
withTooltip: !0,
xAxisOptions: {},
yAxisOptions: { gridLines: !0 }
}, Jl = /* @__PURE__ */ Z({
__name: "lume-line-chart",
props: {
...we(null, !1)
},
setup(e, { emit: n }) {
const t = e, { componentEventPropagator: o } = _e(), a = Ae(ue()), { options: u } = ee(t), { allOptions: l } = fe(u, Sl);
return (i, c) => (_(), Y(d(Ee), j({ ...t, ...i.$attrs }, {
"chart-type": "line",
options: d(l),
"data-j-lume-line-chart": ""
}, oe(d(o))), ce({
groups: V((s) => [
re(d(ln), j(s, oe(d(o))), null, 16)
]),
_: 2
}, [
W(d(a), (s, m) => ({
name: m,
fn: V((r) => [
M(i.$slots, m, pe(he(r || {})))
])
}))
]), 1040, ["options"]));
}
});
function Gl(e) {
return { areaPathDefinition: v(
() => function(t, o) {
if (!t || !o || de(t) || de(o))
return;
const a = e.value[0].values;
return _n().x((u, l) => t(l)).y0(o(Math.min(...o.domain()))).y1((u) => o(u.value))(a);
}
) };
}
const jl = {
margins: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
withAxes: !1,
showArea: !0,
startOnZero: !0,
withLegend: !1,
tooltipOptions: {
showTitle: !1
}
}, Vl = ["d"], Pl = /* @__PURE__ */ Z({
__name: "lume-sparkline-chart",
props: {
...pt(null),
...Re()
},
setup(e, { expose: n, emit: t }) {
const o = e, { componentEventPropagator: a } = _e(), u = Ae(ue()), { data: l, options: i } = ee(o), { internalData: c } = ht(l), { allOptions: s } = fe(i, jl), { computedLineData: m } = an(c), { areaPathDefinition: r } = Gl(m), f = v(() => {
var $, L;
return (L = ($ = c.value) == null ? void 0 : $[0]) == null ? void 0 : L.color;
}), y = v(
() => {
var $, L;
return ((L = ($ = l.value) == null ? void 0 : $[0]) == null ? void 0 : L.areaColor) || f.value;
}
);
function p($) {
return {
...$,
noMinSize: !0
};
}
function b($, L, g) {
if ($.length)
return Me().range([0, g.width]).domain([0, $[0].values.length - 1]);
}
return n({
areaPathDefinition: r
}), ($, L) => (_(), Y(d(Ee), j(o, {
"chart-type": "line",
options: p(d(s)),
"x-scale": b
}, oe(d(a))), ce({
groups: V((g) => [
d(s).showArea ? (_(), I("path", {
key: 0,
class: te([
"sparkline-chart__area",
d(i).withTransition !== !1 ? "sparkline-chart__area--transition" : "",
`lume-fill--${y.value || f.value}`,
"lume-fill--faded"
]),
d: d(r)(g.xScale, g.yScale),
"data-j-sparkline__area": ""
}, null, 10, Vl)) : z("", !0),
re(d(ln), j(g, { "with-points": !1 }, oe(d(a))), null, 16)
]),
_: 2
}, [
W(d(u), (g, O) => ({
name: O,
fn: V((N) => [
M($.$slots, O, pe(he(N || {})), void 0, !0)
])
}))
]), 1040, ["options"]));
}
}), Ql = /* @__PURE__ */ q(Pl, [["__scopeId", "data-v-e9fe3992"]]);
export {
Zo as A,
Uo as B,
Re as C,
fe as D,
gt as E,
we as F,
po as G,
ho as H,
fo as I,
mo as J,
wt as K,
Ee as L,
tt as M,
Et as N,
en as O,
Ko as P,
Jo as Q,
ie as R,
qt as S,
vt as T,
ft as U,
mt as V,
ke as W,
Zl as _,
Ul as a,
Xl as b,
Yl as c,
Kl as d,
Jl as e,
Lt as f,
ko as g,
Nt as h,
Fo as i,
Ro as j,
No as k,
Ql as l,
Oo as m,
dt as n,
Ll as o,
xl as p,
nl as q,
ya as r,
ba as s,
Oa as t,
yt as u,
ln as v,
Wo as w,
pt as x,
ht as y,
an as z
};
//# sourceMappingURL=o-3UCjl8.js.map