vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
754 lines (753 loc) • 32.3 kB
JavaScript
import { defineAsyncComponent as O, computed as m, ref as d, watch as pe, shallowRef as me, onMounted as ke, onBeforeUnmount as Ue, createElementBlock as r, openBlock as o, unref as n, normalizeStyle as V, normalizeClass as _e, createBlock as z, createCommentVNode as v, createElementVNode as i, createSlots as Be, withCtx as _, renderSlot as k, normalizeProps as E, guardReactiveProps as H, createVNode as je, Fragment as $, renderList as L, toDisplayString as S, createTextVNode as xe, nextTick as qe } from "vue";
import { u as Ye, c as we, a as Ze, o as Je, e as Ce, g as Ke, v as $e, D as Qe, f as X, X as Le, i as q, l as Ae, h as ze, q as et, r as tt } from "./index-BLtEpj8j.js";
import { t as lt, u as at } from "./useResponsive-DfdjqQps.js";
import { u as Se } from "./useNestedProp-Bw1KcAmj.js";
import { u as st } from "./usePrinter-DnRwTdvS.js";
import { u as ot } from "./useUserOptionState-BIvW1Kz7.js";
import { u as rt } from "./useChartAccessibility-9icAAmYg.js";
import nt from "./Legend-E7G897sw.js";
import ut from "./Title-DkG60EPg.js";
import it from "./img-D-vWHxhM.js";
import { _ as ct } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const dt = ["id"], vt = ["xmlns", "viewBox"], ht = ["x", "y", "width", "height"], yt = { key: 1 }, ft = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], bt = { key: 2 }, gt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], pt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], mt = { key: 3 }, kt = ["x", "y", "font-size", "fill", "font-weight"], _t = ["x", "y", "font-size", "fill"], xt = { key: 4 }, wt = ["x", "y", "font-size", "fill", "font-weight"], Ct = ["id"], $t = ["stop-color"], Lt = ["stop-color"], At = ["stop-color"], zt = ["id"], St = ["stop-color"], Xt = ["stop-color"], Nt = ["stop-color"], Tt = ["id"], Ot = ["stop-color"], Pt = ["stop-color"], It = ["id"], Mt = ["stop-color"], Gt = ["stop-color"], Dt = { key: 0 }, Ft = ["d", "fill"], Rt = { key: 1 }, Vt = ["x", "y", "height", "width", "fill"], Et = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ht = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Wt = { key: 5 }, Ut = ["x", "y", "fill", "font-size"], Bt = { key: 6 }, jt = ["x", "y", "fill", "font-size"], qt = {
key: 5,
class: "vue-data-ui-watermark"
}, Yt = ["xmlns", "height", "width"], Zt = ["fill"], Jt = ["innerHTML"], Kt = {
__name: "vue-ui-dumbbell",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectDatapoint"],
setup(Xe, { expose: Ne, emit: Qt }) {
const Te = O(() => import("./vue-ui-accordion-B6Svdk-2.js")), Oe = O(() => import("./DataTable-CS_V_Adx.js")), Pe = O(() => import("./PackageVersion-CnRyWKP-.js")), Ie = O(() => import("./PenAndPaper-7BWf7zgA.js")), Me = O(() => import("./vue-ui-skeleton-CsMU8DwQ.js")), Ge = O(() => import("./UserOptions-DGw0HvSp.js")), { vue_ui_dumbbell: De } = Ye(), g = Xe, N = m({
get() {
return !!g.dataset && g.dataset.length;
},
set(l) {
return l;
}
}), y = d(we()), Y = d(0), A = d(null), Z = d(null), J = d(null), K = d(null), Q = d(null), ee = d(0), te = d(0), le = d(0), e = m({
get: () => re(),
set: (l) => l
}), { userOptionsVisible: W, setUserOptionsVisibility: ae, keepUserOptionState: se } = ot({ config: e.value }), { svgRef: oe } = rt({ config: e.value.style.chart.title });
function re() {
const l = Se({
userConfig: g.config,
defaultConfig: De
});
return l.theme ? {
...Se({
userConfig: Ze.vue_ui_dumbbell[l.theme] || g.config,
defaultConfig: l
})
} : l;
}
pe(() => g.config, (l) => {
e.value = re(), W.value = !e.value.userOptions.showOnChartHover, ne(), ee.value += 1, te.value += 1, le.value += 1, h.value = e.value.style.chart.rowHeight, I.value = e.value.style.chart.width, P.value.showTable = e.value.table.show;
}, { deep: !0 }), pe(() => g.dataset, (l) => {
he();
}, { deep: !0 });
const w = me(null), T = me(null);
ke(() => {
ne();
});
function ne() {
if (Je(g.dataset) ? Ce({
componentName: "VueUiDumbbell",
type: "dataset"
}) : g.dataset.forEach((l, u) => {
Ke({
datasetObject: l,
requiredAttributes: ["name", "start", "end"]
}).forEach((t) => {
N.value = !1, Ce({
componentName: "VueUiDumbbell",
type: "datasetSerieAttribute",
property: t,
index: u
});
});
}), e.value.responsive) {
const l = lt(() => {
const { width: u, height: t } = at({
chart: A.value,
title: e.value.style.chart.title.text ? Z.value : null,
legend: e.value.style.chart.legend.show ? J.value : null,
source: K.value,
noTitle: Q.value
});
requestAnimationFrame(() => {
I.value = u, h.value = t / g.dataset.length, f.value = G();
});
});
w.value && (T.value && w.value.unobserve(T.value), w.value.disconnect()), w.value = new ResizeObserver(l), T.value = A.value.parentNode, w.value.observe(T.value);
}
}
Ue(() => {
w.value && (T.value && w.value.unobserve(T.value), w.value.disconnect());
});
const { isPrinting: ue, isImaging: ie, generatePdf: ce, generateImage: de } = st({
elementId: `dumbbell_${y.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-dumbbell",
options: e.value.userOptions.print
}), Fe = m(() => e.value.userOptions.show && !e.value.style.chart.title.text), P = d({
showTable: e.value.table.show
}), x = m(() => g.dataset.map((l, u) => ({
...l,
start: $e(l.start),
end: $e(l.end),
id: we()
}))), U = m(() => ({
max: Math.max(...x.value.flatMap((l) => [l.start, l.end])),
min: Math.min(...x.value.flatMap((l) => [l.start, l.end]))
})), c = m(() => Qe(U.value.min < 0 ? U.value.min : 0, U.value.max, e.value.style.chart.grid.scaleSteps)), h = d(e.value.style.chart.rowHeight), I = d(e.value.style.chart.width), s = m(() => {
const l = h.value, u = e.value.style.chart.padding.left + e.value.style.chart.padding.right + I.value, t = e.value.style.chart.padding.top + e.value.style.chart.padding.bottom + l * g.dataset.length, a = c.value.ticks.length * (I.value / c.value.ticks.length);
return {
left: e.value.style.chart.padding.left,
right: u - e.value.style.chart.padding.right,
top: e.value.style.chart.padding.top,
bottom: t - e.value.style.chart.padding.bottom,
width: I.value,
height: l * g.dataset.length,
rowHeight: l,
absoluteHeight: t,
absoluteWidth: u,
widthPlotReference: a
};
});
function G() {
return x.value.map((l, u) => {
const t = s.value.left + (l.start + Math.abs(c.value.min)) / (c.value.max + Math.abs(c.value.min)) * s.value.widthPlotReference, a = s.value.left + (l.end + Math.abs(c.value.min)) / (c.value.max + Math.abs(c.value.min)) * s.value.widthPlotReference, p = t + (a - t) / 2;
return {
...l,
startX: t,
endX: a,
centerX: p,
y: s.value.top + u * h.value + h.value / 2,
endVal: l.start
};
});
}
const f = d([]), ve = d(null), Re = m(() => x.value.map((l) => l.end).reduce((l, u) => l + u, 0));
ke(() => {
he();
});
function he() {
f.value = G();
let l = f.value.map((t) => t.start).reduce((t, a) => t + a, 0);
function u() {
const t = x.value.map((a) => a.end - a.start);
l >= Re.value ? (cancelAnimationFrame(ve.value), f.value = G()) : (f.value = f.value.map((a, p) => {
a.endVal += t[p] * (e.value.animationSpeed / 100);
const b = s.value.left + (a.start + Math.abs(c.value.min)) / (c.value.max + Math.abs(c.value.min)) * s.value.widthPlotReference, R = s.value.left + (a.endVal + Math.abs(c.value.min)) / (c.value.max + Math.abs(c.value.min)) * s.value.widthPlotReference, j = b + (R - b) / 2;
return {
...a,
startX: b,
endX: R,
centerX: j,
y: s.value.top + p * h.value + h.value / 2,
endVal: a.endVal
};
}), l = f.value.map((a) => a.endVal).reduce((a, p) => a + p, 0), ve.value = requestAnimationFrame(u));
}
e.value.useAnimation ? u() : f.value = G();
}
const ye = m(() => [
{ name: e.value.style.chart.legend.labelStart, color: e.value.style.chart.plots.gradient.show ? `url(#start_grad_${y.value})` : e.value.style.chart.plots.startColor },
{ name: e.value.style.chart.legend.labelEnd, color: e.value.style.chart.plots.gradient.show ? `url(#end_grad_${y.value})` : e.value.style.chart.plots.endColor }
]), Ve = m(() => ({
cy: "donut-div-legend",
backgroundColor: e.value.style.chart.legend.backgroundColor,
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 12,
paddingTop: 12,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
})), C = m(() => {
const l = f.value.map((t) => ({
name: t.name
})), u = f.value.map((t) => ({
start: t.start,
end: t.end
}));
return { head: l, body: u };
}), D = m(() => {
const l = [
e.value.table.columnNames.series,
e.value.table.columnNames.start,
e.value.table.columnNames.end,
e.value.table.columnNames.progression
], u = C.value.head.map((p, b) => {
const R = X({
p: e.value.style.chart.labels.prefix,
v: C.value.body[b].start,
s: e.value.style.chart.labels.suffix,
r: e.value.table.td.roundingValue
}), j = X({
p: e.value.style.chart.labels.prefix,
v: C.value.body[b].end,
s: e.value.style.chart.labels.suffix,
r: e.value.table.td.roundingValue
}), We = X({
v: 100 * (C.value.body[b].end / C.value.body[b].start - 1),
s: "%",
r: e.value.table.td.roundingPercentage
});
return [
{ name: p.name },
R,
j,
We
];
}), t = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint
};
return {
colNames: [
e.value.table.columnNames.series,
e.value.table.columnNames.start,
e.value.table.columnNames.end,
e.value.table.columnNames.progression
],
head: l,
body: u,
config: t
};
});
function fe(l = null) {
qe(() => {
const u = C.value.head.map((p, b) => [[
p.name
], [C.value.body[b].start], [C.value.body[b].end]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.start], [e.value.table.columnNames.end]]].concat(u), a = et(t);
l ? l(a) : tt({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-dumbbell" });
});
}
const M = d(!1);
function be(l) {
M.value = l, Y.value += 1;
}
function Ee() {
return x.value;
}
function ge() {
P.value.showTable = !P.value.showTable;
}
const F = d(!1);
function B() {
F.value = !F.value;
}
async function He({ scale: l = 2 } = {}) {
if (!A.value) return;
const { width: u, height: t } = A.value.getBoundingClientRect(), a = u / t, { imageUri: p, base64: b } = await it({ domElement: A.value, base64: !0, img: !0, scale: l });
return {
imageUri: p,
base64: b,
title: e.value.style.chart.title.text,
width: u,
height: t,
aspectRatio: a
};
}
return Ne({
getData: Ee,
getImage: He,
generatePdf: ce,
generateCsv: fe,
generateImage: de,
toggleTable: ge,
toggleAnnotator: B,
toggleFullscreen: be
}), (l, u) => (o(), r("div", {
ref_key: "dumbbellChart",
ref: A,
class: _e(`vue-ui-dumbbell ${M.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: V(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
id: `dumbbell_${y.value}`,
onMouseenter: u[1] || (u[1] = () => n(ae)(!0)),
onMouseleave: u[2] || (u[2] = () => n(ae)(!1))
}, [
e.value.userOptions.buttons.annotator ? (o(), z(n(Ie), {
key: 0,
svgRef: n(oe),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: F.value,
onClose: B
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : v("", !0),
Fe.value ? (o(), r("div", {
key: 1,
ref_key: "noTitle",
ref: Q,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : v("", !0),
e.value.style.chart.title.text ? (o(), r("div", {
key: 2,
ref_key: "chartTitle",
ref: Z,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [
(o(), z(ut, {
key: `title_${ee.value}`,
config: {
title: {
cy: "donut-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "donut-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : v("", !0),
e.value.userOptions.show && N.value && (n(se) || n(W)) ? (o(), z(n(Ge), {
ref: "details",
key: `user_option_${Y.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: n(ue),
isImaging: n(ie),
uid: y.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasXls: e.value.userOptions.buttons.csv,
hasImg: e.value.userOptions.buttons.img,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: M.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: A.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: F.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: be,
onGeneratePdf: n(ce),
onGenerateCsv: fe,
onGenerateImage: n(de),
onToggleTable: ge,
onToggleAnnotator: B,
style: V({
visibility: n(se) ? n(W) ? "visible" : "hidden" : "visible"
})
}, Be({ _: 2 }, [
l.$slots.menuIcon ? {
name: "menuIcon",
fn: _(({ isOpen: t, color: a }) => [
k(l.$slots, "menuIcon", E(H({ isOpen: t, color: a })), void 0, !0)
]),
key: "0"
} : void 0,
l.$slots.optionPdf ? {
name: "optionPdf",
fn: _(() => [
k(l.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
l.$slots.optionCsv ? {
name: "optionCsv",
fn: _(() => [
k(l.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
l.$slots.optionImg ? {
name: "optionImg",
fn: _(() => [
k(l.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
l.$slots.optionTable ? {
name: "optionTable",
fn: _(() => [
k(l.$slots, "optionTable", {}, void 0, !0)
]),
key: "4"
} : void 0,
l.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: _(({ toggleFullscreen: t, isFullscreen: a }) => [
k(l.$slots, "optionFullscreen", E(H({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
]),
key: "5"
} : void 0,
l.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: _(({ toggleAnnotator: t, isAnnotator: a }) => [
k(l.$slots, "optionAnnotator", E(H({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
]),
key: "6"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : v("", !0),
N.value ? (o(), r("svg", {
key: 4,
ref_key: "svgRef",
ref: oe,
xmlns: n(Le),
class: _e({ "vue-data-ui-fullscreen--on": M.value, "vue-data-ui-fulscreen--off": !M.value }),
viewBox: `0 0 ${s.value.absoluteWidth <= 0 ? 10 : s.value.absoluteWidth} ${s.value.absoluteHeight <= 0 ? 10 : s.value.absoluteHeight}`,
style: V(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
}, [
je(n(Pe)),
l.$slots["chart-background"] ? (o(), r("foreignObject", {
key: 0,
x: s.value.left,
y: s.value.top,
width: Math.max(0.1, s.value.width),
height: Math.max(0.1, s.value.height),
style: {
pointerEvents: "none"
}
}, [
k(l.$slots, "chart-background", {}, void 0, !0)
], 8, ht)) : v("", !0),
e.value.style.chart.grid.verticalGrid.show ? (o(), r("g", yt, [
(o(!0), r($, null, L(c.value.ticks, (t, a) => (o(), r("line", {
x1: s.value.left + a * s.value.width / (c.value.ticks.length - 1),
x2: s.value.left + a * s.value.width / (c.value.ticks.length - 1),
y1: s.value.top,
y2: s.value.bottom,
stroke: e.value.style.chart.grid.verticalGrid.stroke,
"stroke-width": e.value.style.chart.grid.verticalGrid.strokeWidth,
"stroke-dasharray": e.value.style.chart.grid.verticalGrid.strokeDasharray
}, null, 8, ft))), 256))
])) : v("", !0),
e.value.style.chart.grid.horizontalGrid.show ? (o(), r("g", bt, [
(o(!0), r($, null, L(x.value, (t, a) => (o(), r("line", {
x1: s.value.left,
x2: s.value.right,
y1: s.value.top + a * h.value,
y2: s.value.top + a * h.value,
stroke: e.value.style.chart.grid.horizontalGrid.stroke,
"stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
"stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray
}, null, 8, gt))), 256)),
i("line", {
x1: s.value.left,
x2: s.value.right,
y1: s.value.bottom,
y2: s.value.bottom,
stroke: e.value.style.chart.grid.horizontalGrid.stroke,
"stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
"stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray
}, null, 8, pt)
])) : v("", !0),
e.value.style.chart.labels.yAxisLabels.show ? (o(), r("g", mt, [
(o(!0), r($, null, L(x.value, (t, a) => (o(), r("text", {
x: s.value.left - 6 + e.value.style.chart.labels.yAxisLabels.offsetX,
y: s.value.top + a * h.value + (e.value.style.chart.labels.yAxisLabels.showProgression ? h.value / 3 : h.value / 2) + e.value.style.chart.labels.yAxisLabels.fontSize / 3,
"font-size": e.value.style.chart.labels.yAxisLabels.fontSize,
fill: e.value.style.chart.labels.yAxisLabels.color,
"font-weight": e.value.style.chart.labels.yAxisLabels.bold ? "bold" : "normal",
"text-anchor": "end"
}, S(t.name), 9, kt))), 256)),
e.value.style.chart.labels.yAxisLabels.showProgression ? (o(!0), r($, { key: 0 }, L(x.value, (t, a) => (o(), r("text", {
x: s.value.left - 6 + e.value.style.chart.labels.yAxisLabels.offsetX,
y: s.value.top + a * h.value + h.value / 1.3 + e.value.style.chart.labels.yAxisLabels.fontSize / 3,
"font-size": e.value.style.chart.labels.yAxisLabels.fontSize,
fill: e.value.style.chart.labels.yAxisLabels.color,
"text-anchor": "end"
}, S(n(X)({
v: 100 * (t.end / t.start - 1),
s: "%",
r: e.value.style.chart.labels.yAxisLabels.rounding
})), 9, _t))), 256)) : v("", !0)
])) : v("", !0),
e.value.style.chart.labels.xAxisLabels.show ? (o(), r("g", xt, [
(o(!0), r($, null, L(c.value.ticks, (t, a) => (o(), r("text", {
x: s.value.left + a * (s.value.width / (c.value.ticks.length - 1)),
y: s.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize + e.value.style.chart.labels.xAxisLabels.offsetY,
"font-size": e.value.style.chart.labels.xAxisLabels.fontSize,
fill: e.value.style.chart.labels.xAxisLabels.color,
"font-weight": e.value.style.chart.labels.xAxisLabels.bold ? "bold" : "normal",
"text-anchor": "middle"
}, S(n(q)(
e.value.style.chart.labels.formatter,
t,
n(X)({
p: e.value.style.chart.labels.prefix,
v: t,
s: e.value.style.chart.labels.suffix,
r: e.value.style.chart.labels.xAxisLabels.rounding
}),
{ datapoint: t, seriesIndex: a }
)), 9, wt))), 256))
])) : v("", !0),
i("defs", null, [
i("radialGradient", {
id: `start_grad_${y.value}`,
fy: "30%"
}, [
i("stop", {
offset: "10%",
"stop-color": n(Ae)(e.value.style.chart.plots.startColor, e.value.style.chart.plots.gradient.intensity / 100)
}, null, 8, $t),
i("stop", {
offset: "90%",
"stop-color": n(ze)(e.value.style.chart.plots.startColor, 0.1)
}, null, 8, Lt),
i("stop", {
offset: "100%",
"stop-color": e.value.style.chart.plots.startColor
}, null, 8, At)
], 8, Ct),
i("radialGradient", {
id: `end_grad_${y.value}`,
fy: "30%"
}, [
i("stop", {
offset: "10%",
"stop-color": n(Ae)(e.value.style.chart.plots.endColor, e.value.style.chart.plots.gradient.intensity / 100)
}, null, 8, St),
i("stop", {
offset: "90%",
"stop-color": n(ze)(e.value.style.chart.plots.endColor, 0.1)
}, null, 8, Xt),
i("stop", {
offset: "100%",
"stop-color": e.value.style.chart.plots.endColor
}, null, 8, Nt)
], 8, zt)
]),
(o(!0), r($, null, L(f.value, (t, a) => (o(), r("g", null, [
i("defs", null, [
i("linearGradient", {
id: `grad_positive_${y.value}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%"
}, [
i("stop", {
offset: "0%",
"stop-color": e.value.style.chart.plots.startColor
}, null, 8, Ot),
i("stop", {
offset: "100%",
"stop-color": e.value.style.chart.plots.endColor
}, null, 8, Pt)
], 8, Tt),
i("linearGradient", {
id: `grad_negative_${y.value}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%"
}, [
i("stop", {
offset: "0%",
"stop-color": e.value.style.chart.plots.endColor
}, null, 8, Mt),
i("stop", {
offset: "100%",
"stop-color": e.value.style.chart.plots.startColor
}, null, 8, Gt)
], 8, It)
]),
e.value.style.chart.plots.link.type === "curved" ? (o(), r("g", Dt, [
i("path", {
d: `M
${t.startX},${t.y + e.value.style.chart.plots.radius / 2}
C ${t.centerX},${t.y} ${t.centerX},${t.y}
${t.endX},${t.y + e.value.style.chart.plots.radius / 2}
L ${t.endX},${t.y - e.value.style.chart.plots.radius / 2}
C ${t.centerX},${t.y} ${t.centerX},${t.y}
${t.startX},${t.y - e.value.style.chart.plots.radius / 2}
Z
`,
fill: t.endX > t.startX ? `url(#grad_positive_${y.value})` : `url(#grad_negative_${y.value})`
}, null, 8, Ft)
])) : (o(), r("g", Rt, [
i("rect", {
x: t.endX > t.startX ? t.startX : t.endX,
y: t.y - e.value.style.chart.plots.link.strokeWidth / 2,
height: e.value.style.chart.plots.link.strokeWidth,
width: Math.abs(t.endX - t.startX),
fill: t.endX > t.startX ? `url(#grad_positive_${y.value})` : `url(#grad_negative_${y.value})`
}, null, 8, Vt)
])),
i("circle", {
cx: t.startX,
cy: t.y,
r: e.value.style.chart.plots.radius,
fill: e.value.style.chart.plots.gradient.show ? `url(#start_grad_${y.value})` : e.value.style.chart.plots.startColor,
stroke: e.value.style.chart.plots.stroke,
"stroke-width": e.value.style.chart.plots.strokeWidth
}, null, 8, Et),
i("circle", {
cx: t.endX,
cy: t.y,
r: e.value.style.chart.plots.radius,
fill: e.value.style.chart.plots.gradient.show ? `url(#end_grad_${y.value})` : e.value.style.chart.plots.endColor,
stroke: e.value.style.chart.plots.stroke,
"stroke-width": e.value.style.chart.plots.strokeWidth
}, null, 8, Ht)
]))), 256)),
e.value.style.chart.labels.startLabels.show ? (o(), r("g", Wt, [
(o(!0), r($, null, L(f.value, (t, a) => (o(), r("text", {
x: t.startX,
y: s.value.top + (a + 1) * h.value - e.value.style.chart.labels.startLabels.fontSize / 3 + e.value.style.chart.labels.startLabels.offsetY,
fill: e.value.style.chart.labels.startLabels.useStartColor ? e.value.style.chart.plots.startColor : e.value.style.chart.labels.startLabels.color,
"font-size": e.value.style.chart.labels.startLabels.fontSize,
"text-anchor": "middle"
}, S(n(q)(
e.value.style.chart.labels.formatter,
t.start,
n(X)({
p: e.value.style.chart.labels.prefix,
v: t.start,
s: e.value.style.chart.labels.suffix,
r: e.value.style.chart.labels.startLabels.rounding
}),
{ datapoint: t, seriesIndex: a }
)), 9, Ut))), 256))
])) : v("", !0),
e.value.style.chart.labels.endLabels.show ? (o(), r("g", Bt, [
(o(!0), r($, null, L(f.value, (t, a) => (o(), r("text", {
x: t.endX,
y: s.value.top + a * h.value + e.value.style.chart.labels.endLabels.fontSize + e.value.style.chart.labels.endLabels.offsetY,
fill: e.value.style.chart.labels.endLabels.useEndColor ? e.value.style.chart.plots.endColor : e.value.style.chart.labels.endLabels.color,
"font-size": e.value.style.chart.labels.endLabels.fontSize,
"text-anchor": "middle"
}, S(n(q)(
e.value.style.chart.labels.formatter,
t.end,
n(X)({
p: e.value.style.chart.labels.prefix,
v: t.end,
s: e.value.style.chart.labels.suffix,
r: e.value.style.chart.labels.endLabels.rounding
}),
{ datapoint: t, seriesIndex: a }
)), 9, jt))), 256))
])) : v("", !0),
k(l.$slots, "svg", { svg: s.value }, void 0, !0)
], 14, vt)) : v("", !0),
l.$slots.watermark ? (o(), r("div", qt, [
k(l.$slots, "watermark", E(H({ isPrinting: n(ue) || n(ie) })), void 0, !0)
])) : v("", !0),
N.value ? v("", !0) : (o(), z(n(Me), {
key: 6,
config: {
type: "dumbbell",
style: {
backgroundColor: e.value.style.chart.backgroundColor,
dumbbell: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"])),
i("div", {
ref_key: "chartLegend",
ref: J
}, [
e.value.style.chart.legend.show && N.value ? (o(), z(nt, {
key: `legend_${le.value}`,
legendSet: ye.value,
config: Ve.value
}, {
item: _(({ legend: t }) => [
i("div", {
style: V(`display:flex;align-items:center;gap:4px;font-size:${e.value.style.chart.legend.fontSize}px`)
}, [
(o(), r("svg", {
xmlns: n(Le),
viewBox: "0 0 20 20",
height: e.value.style.chart.legend.fontSize,
width: e.value.style.chart.legend.fontSize
}, [
i("circle", {
cx: 10,
cy: 10,
r: 9,
fill: t.color
}, null, 8, Zt)
], 8, Yt)),
xe(" " + S(t.name), 1)
], 4)
]),
_: 1
}, 8, ["legendSet", "config"])) : k(l.$slots, "legend", {
key: 1,
legend: ye.value
}, void 0, !0)
], 512),
l.$slots.source ? (o(), r("div", {
key: 7,
ref_key: "source",
ref: K,
dir: "auto"
}, [
k(l.$slots, "source", {}, void 0, !0)
], 512)) : v("", !0),
N.value ? (o(), z(n(Te), {
key: 8,
hideDetails: "",
config: {
open: P.value.showTable,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
},
head: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
}
}
}, {
content: _(() => [
(o(), z(n(Oe), {
key: `table_${te.value}`,
colNames: D.value.colNames,
head: D.value.head,
body: D.value.body,
config: D.value.config,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
onClose: u[0] || (u[0] = (t) => P.value.showTable = !1)
}, {
th: _(({ th: t }) => [
i("div", {
innerHTML: t,
style: { display: "flex", "align-items": "center" }
}, null, 8, Jt)
]),
td: _(({ td: t }) => [
xe(S(t.name || t), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : v("", !0)
], 46, dt));
}
}, dl = /* @__PURE__ */ ct(Kt, [["__scopeId", "data-v-8b6099dd"]]);
export {
dl as default
};