vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
725 lines (724 loc) • 25.7 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { Jt as t, Ot as n, S as r, X as i, _ as a, i as o, jt as ee, pt as te, q as ne, t as re, tt as ie } from "./lib-Bttd6u5E.js";
import { n as ae } from "./useHints-Dq_w2E8B.js";
import { t as oe } from "./useConfig-D3scuR88.js";
import { t as se } from "./usePrinter-DN5bYhTG.js";
import { n as ce, t as le } from "./BaseScanner-DZvpgOjM.js";
import { t as ue } from "./useSvgExport-DH-FfcqQ.js";
import { t as s } from "./useNestedProp-vPNvh7rV.js";
import { t as de } from "./useThemeCheck-C43Tcqmk.js";
import { t as fe } from "./img-Bnokohej.js";
import { n as pe } from "./Title-BE3qg9xl.js";
import { t as me } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as he, t as ge } from "./useResponsive-ZtArZtUf.js";
import { t as _e } from "./useUserOptionState-DK-_1ddE.js";
import { t as ve } from "./useChartAccessibility-DYqac8yF.js";
import { t as ye } from "./Legend-CQxUgOd-.js";
import { t as be } from "./vue_ui_bullet-ClzdLoOv.js";
import { Fragment as c, Teleport as xe, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as Se, createVNode as Ce, defineAsyncComponent as m, guardReactiveProps as h, nextTick as we, normalizeClass as Te, normalizeProps as g, normalizeStyle as _, onBeforeUnmount as Ee, onMounted as De, openBlock as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, toRefs as Oe, unref as C, watch as ke, withCtx as w } from "vue";
//#region src/components/vue-ui-bullet.vue
var Ae = /* @__PURE__ */ e({ default: () => T }), je = ["id"], Me = {
key: 1,
ref: "noTitle",
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, Ne = ["id"], Pe = [
"xmlns",
"viewBox",
"aria-labelledby",
"aria-describedby"
], Fe = ["id"], Ie = ["id"], Le = ["width", "height"], Re = { key: 1 }, ze = [
"x",
"y",
"height",
"width",
"fill",
"stroke"
], Be = [
"x",
"y",
"height",
"width",
"rx",
"fill",
"stroke",
"stroke-width"
], Ve = [
"x",
"y",
"height",
"width",
"fill",
"stroke",
"stroke-width"
], He = [
"x",
"y",
"font-size",
"font-weight",
"fill"
], Ue = [
"x",
"y",
"height",
"width",
"rx",
"fill",
"stroke",
"stroke-width"
], We = { key: 3 }, Ge = [
"x",
"y",
"fill",
"font-size",
"font-weight"
], Ke = { key: 4 }, qe = [
"x1",
"x2",
"y1",
"y2",
"stroke"
], Je = {
key: 4,
class: "vue-data-ui-watermark"
}, Ye = ["id"], Xe = {
key: 0,
class: "vue-ui-bullet-legend-item",
dir: "auto"
}, Ze = { style: { "margin-right": "2px" } }, T = /*#__PURE__*/ me({
__name: "vue-ui-bullet",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
emits: ["copyAlt"],
setup(e, { expose: me, emit: Ae }) {
let T = m(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), Qe = m(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), $e = m(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), { vue_ui_bullet: et } = oe(), { isThemeValid: tt, warnInvalidTheme: nt } = de(), E = e, rt = Ae, D = y(null), it = y(null), at = y(0), ot = y(null), st = y(null), ct = y(0), O = y(null), k = y(null), lt = y(!1), A = y(!1), j = y(!1), M = l({
get: () => R.value.hasOwnProperty("value"),
set: (e) => e
}), N = l(() => R.value.segments ? Array.isArray(R.value.segments) ? R.value.segments.length ? !0 : (console.warn("VueUiBullet: dataset segments is empty. Provide segments with this datastructure:\n\nsegments: [\n {\n name: string;\n from: number;\n to: number;\n color?: string;\n },\n {...}\n]\n "), M.value = !1, !1) : (console.warn("VueUiBullet: dataset segments must be an array of objects with this datastructure:\n\nsegments: [\n {\n name: string;\n from: number;\n to: number;\n color?: string;\n },\n {...}\n] \n "), M.value = !1, !1) : (console.warn("VueUiBullet: dataset segments is empty. Provide segments with this datastructure:\n\nsegments: [\n {\n name: string;\n from: number;\n to: number;\n color?: string;\n },\n {...}\n]\n "), M.value = !1, !1)), ut = l(() => !!I.value.debug), dt = l(() => {
let { top: e, right: t, bottom: n, left: r } = I.value.style.chart.padding;
return {
top: e,
right: t,
bottom: n,
left: r
};
});
function ft() {
if (ee(R.value) ? (ie({
componentName: "VueUiBullet",
type: "dataset",
debug: ut.value
}), z.value = !0) : N.value ? R.value.segments.forEach((e, t) => {
te({
datasetObject: e,
requiredAttributes: [
"name",
"from",
"to"
]
}).forEach((e) => {
M.value = !1, ie({
componentName: "VueUiBullet segment",
type: "datasetSerieAttribute",
property: e,
index: t,
debug: ut.value
});
});
}) : (M.value = !1, z.value = !0), ee(R.value) || (z.value = I.value.loading), I.value.responsive) {
let e = he(() => {
let { width: e, height: t } = ge({
chart: D.value,
title: I.value.style.chart.title.text ? it.value : null,
legend: I.value.style.chart.legend.show ? ot.value : null,
source: st.value,
padding: dt.value
}), n = (I.value.style.chart.legend.show ? 24 : 0) || 12;
requestAnimationFrame(() => {
U.value.width = e, U.value.height = t - n;
});
});
O.value && (k.value && O.value.unobserve(k.value), O.value.disconnect()), O.value = new ResizeObserver(e), k.value = D.value.parentNode, O.value.observe(k.value);
}
I.value.style.chart.animation.show && !L.value && xt(R.value.value || 0);
}
De(() => {
lt.value = !0, ft();
});
let P = y(ne());
function F() {
let e = s({
userConfig: E.config,
defaultConfig: et
}), t = e.theme;
if (!t) return e;
if (!tt.value(e)) return nt(e), e;
let n = s({
userConfig: be[t] || E.config,
defaultConfig: e
});
return s({
userConfig: E.config,
defaultConfig: n
});
}
let I = y(F());
ae({
config: () => I.value,
dataset: () => E.dataset,
component: "VueUiBullet",
rules: [{
test: (e) => e?.segments && e?.segments.length > 8,
message: [
"👀 The number of target segments is > 8, which can make the chart hard to read and a large legend. Consider:",
"",
"▶️ Using broader segments."
]
}]
});
let pt = l(() => I.value.userOptions.useCursorPointer), mt = l(() => t({
defaultConfig: {
userOptions: { show: !1 },
style: { chart: {
backgroundColor: "#99999930",
segments: {
dataLabels: { show: !1 },
ticks: { stroke: "#8A8A8A" }
},
valueBar: { label: { show: !1 } }
} }
},
userConfig: I.value.skeletonConfig ?? {}
})), { loading: L, FINAL_DATASET: R, manualLoading: z } = ce({
...Oe(E),
FINAL_CONFIG: I,
prepareConfig: F,
skeletonDataset: E.config?.skeletonDataset ?? {
value: 100,
target: 100,
segments: [
{
name: "",
from: 0,
to: 33,
color: "#AAAAAA"
},
{
name: "",
from: 33,
to: 66,
color: "#BABABA"
},
{
name: "",
from: 66,
to: 100,
color: "#CACACA"
}
]
},
skeletonConfig: t({
defaultConfig: I.value,
userConfig: mt.value
})
}), { userOptionsVisible: B, setUserOptionsVisibility: ht, keepUserOptionState: V } = _e({ config: I.value }), { svgRef: H } = ve({ config: I.value.style.chart.title }), U = y({
width: I.value.style.chart.width,
height: I.value.style.chart.height
}), gt = l(() => U.value.width), _t = l(() => U.value.height);
ke(() => E.config, (e) => {
L.value || (I.value = F()), B.value = !I.value.userOptions.showOnChartHover, U.value.width = I.value.style.chart.width, U.value.height = I.value.style.chart.height, ft(), at.value += 1;
}, { deep: !0 });
let W = l(() => {
let e = _t.value, t = gt.value, n = I.value.style.chart.padding.left, r = t - I.value.style.chart.padding.right, i = I.value.style.chart.padding.top, a = e - I.value.style.chart.padding.bottom;
return {
height: Math.max(.001, e),
width: Math.max(.001, t),
left: n,
right: r,
top: i,
bottom: a,
chartWidth: Math.max(.001, r - n),
chartHeight: Math.max(.001, a - i)
};
}), vt = l(() => {
if (!N.value) return [];
let e = [];
for (let t = 0; t < R.value.segments.length; t += 1) e.push(n(I.value.style.chart.segments.baseColor, t / R.value.segments.length));
return e;
}), G = l(() => N.value ? {
min: Math.min(...R.value.segments.map((e) => e.from)),
max: Math.max(...R.value.segments.map((e) => e.to))
} : {
min: 0,
max: 1
}), K = y(yt());
ke(() => R.value, (e) => {
e.hasOwnProperty("value") && (z.value = !1), I.value.style.chart.animation.show && !L.value ? xt(e.value || 0) : K.value = e.value || 0;
}, { deep: !0 });
function yt() {
return I.value.style.chart.animation.show && !L.value ? G.value.min : R.value.value || 0;
}
let bt = y(null);
function xt(e) {
let t = Math.abs(e - K.value) / I.value.style.chart.animation.animationFrames;
function n() {
K.value < e ? K.value = Math.min(K.value + t, e) : K.value > e && (K.value = Math.max(K.value - t, e)), K.value !== e && (bt.value = requestAnimationFrame(n));
}
n();
}
Ee(() => {
cancelAnimationFrame(bt.value);
});
let q = l(() => {
if (!N.value) return [];
let e = a(G.value.min, G.value.max, I.value.style.chart.segments.ticks.divisions), t = e.min >= 0 ? 0 : Math.abs(e.min);
return {
scale: e,
target: { x: W.value.left + (R.value.target + t) / (e.max + t) * W.value.chartWidth - I.value.style.chart.target.width / 2 },
value: { width: (K.value + t) / (e.max + t) * W.value.chartWidth },
ticks: e.ticks.map((n) => ({
value: n,
y: W.value.bottom + I.value.style.chart.segments.dataLabels.fontSize + 3 + I.value.style.chart.segments.dataLabels.offsetY,
x: W.value.left + (n + t) / (e.max + t) * W.value.chartWidth
})),
chunks: R.value.segments.map((n, i) => ({
...n,
color: n.color ? r(n.color) : vt.value[i],
x: W.value.left + W.value.chartWidth * ((n.from + t) / (e.max + t)),
y: W.value.top,
height: W.value.chartHeight,
width: W.value.chartWidth * (Math.abs(n.to - n.from) / (e.max + t))
}))
};
}), J = l(() => !q.value || !q.value.chunks || !q.value.chunks.length ? [] : q.value.chunks.map((e) => {
let t = `${o(I.value.style.chart.segments.dataLabels.formatter, e.from, i({
p: I.value.style.chart.segments.dataLabels.prefix,
v: e.from,
s: I.value.style.chart.segments.dataLabels.suffix,
r: I.value.style.chart.segments.dataLabels.rounding
}))} — ${o(I.value.style.chart.segments.dataLabels.formatter, e.to, i({
p: I.value.style.chart.segments.dataLabels.prefix,
v: e.to,
s: I.value.style.chart.segments.dataLabels.suffix,
r: I.value.style.chart.segments.dataLabels.rounding
}))}`;
return {
...e,
shape: "square",
value: t,
display: `${e.name}: ${t}`
};
})), St = l(() => ({
cy: "bullet-div-legend",
backgroundColor: "transparent",
color: I.value.style.chart.legend.color,
fontSize: I.value.style.chart.legend.fontSize,
paddingBottom: 6,
fontWeight: I.value.style.chart.legend.bold ? "bold" : ""
})), { isPrinting: Y, isImaging: X, generatePdf: Ct, generateImage: wt } = se({
elementId: `bullet_${P.value}`,
fileName: I.value.style.chart.title.text || "vue-ui-bullet",
options: I.value.userOptions.print
}), Tt = l(() => I.value.userOptions.show && !I.value.style.chart.title.text), Z = y(!1);
function Et(e) {
Z.value = e, ct.value += 1;
}
function Dt() {
return q.value;
}
let Q = y(!1);
function $() {
Q.value = !Q.value;
}
async function Ot({ scale: e = 2 } = {}) {
if (!D.value) return;
let { width: t, height: n } = D.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await fe({
domElement: D.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: I.value.style.chart.title.text,
width: t,
height: n,
aspectRatio: r
};
}
let kt = l(() => J.value.map((e) => ({
...e,
name: e.display
}))), At = l(() => I.value.style.chart.backgroundColor), jt = l(() => I.value.style.chart.legend), Mt = l(() => I.value.style.chart.title), { exportSvg: Nt, getSvg: Pt } = ue({
svg: H,
title: Mt,
legend: jt,
legendItems: kt,
backgroundColor: At
});
async function Ft({ isCb: e }) {
j.value = !0, await we();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await Pt();
await Promise.resolve(I.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(Nt());
} finally {
j.value = !1;
}
}
function It(e) {
if (e?.stage === "start") {
A.value = !0;
return;
}
if (e?.stage === "end") {
A.value = !1;
return;
}
wt();
}
async function Lt() {
if (rt("copyAlt", {
config: I.value,
dataset: R.value
}), !I.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(I.value.userOptions.callbacks.altCopy({
config: I.value,
dataset: R.value
}));
}
return me({
getData: Dt,
getImage: Ot,
generatePdf: Ct,
generateImage: wt,
generateSvg: Ft,
toggleAnnotator: $,
toggleFullscreen: Et,
copyAlt: Lt
}), (e, t) => (v(), f("div", {
ref_key: "bulletChart",
ref: D,
class: Te(`vue-data-ui-component vue-ui-bullet ${Z.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: _(`font-family:${I.value.style.fontFamily};width:100%;background:${I.value.style.chart.backgroundColor};${I.value.responsive ? "height:100%" : ""}`),
id: `bullet_${P.value}`,
onMouseenter: t[0] ||= () => C(ht)(!0),
onMouseleave: t[1] ||= () => C(ht)(!1)
}, [
I.value.userOptions.buttons.annotator ? (v(), u(C(Qe), {
key: 0,
svgRef: C(H),
backgroundColor: I.value.style.chart.backgroundColor,
color: I.value.style.chart.color,
active: Q.value,
isCursorPointer: pt.value,
onClose: $
}, {
"annotator-action-close": w(() => [x(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": w(({ color: t }) => [x(e.$slots, "annotator-action-color", g(h({ color: t })), void 0, !0)]),
"annotator-action-draw": w(({ mode: t }) => [x(e.$slots, "annotator-action-draw", g(h({ mode: t })), void 0, !0)]),
"annotator-action-undo": w(({ disabled: t }) => [x(e.$slots, "annotator-action-undo", g(h({ disabled: t })), void 0, !0)]),
"annotator-action-redo": w(({ disabled: t }) => [x(e.$slots, "annotator-action-redo", g(h({ disabled: t })), void 0, !0)]),
"annotator-action-delete": w(({ disabled: t }) => [x(e.$slots, "annotator-action-delete", g(h({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : d("", !0),
Tt.value ? (v(), f("div", Me, null, 512)) : d("", !0),
I.value.style.chart.title.text ? (v(), f("div", {
key: 2,
ref_key: "chartTitle",
ref: it,
style: "width:100%;background:transparent;"
}, [(v(), u(pe, {
lineHeight: "1.3rem",
key: `title_${at.value}`,
config: {
title: {
cy: "bullet-div-title",
...I.value.style.chart.title
},
subtitle: {
cy: "bullet-div-subtitle",
...I.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : d("", !0),
p("div", { id: `legend-top-${P.value}` }, null, 8, Ne),
I.value.userOptions.show && M.value && (C(V) || C(B)) ? (v(), u(C($e), {
key: 3,
ref: "details",
backgroundColor: I.value.style.chart.backgroundColor,
color: I.value.style.chart.color,
isPrinting: C(Y),
isImaging: C(X),
uid: P.value,
hasTooltip: !1,
hasPdf: I.value.userOptions.buttons.pdf,
hasImg: I.value.userOptions.buttons.img,
hasSvg: I.value.userOptions.buttons.svg,
hasXls: !1,
hasTable: !1,
hasLabel: !1,
hasFullscreen: I.value.userOptions.buttons.fullscreen,
hasAltCopy: I.value.userOptions.buttons.altCopy,
isFullscreen: Z.value,
chartElement: D.value,
position: I.value.userOptions.position,
titles: { ...I.value.userOptions.buttonTitles },
hasAnnotator: I.value.userOptions.buttons.annotator,
isAnnotation: Q.value,
callbacks: I.value.userOptions.callbacks,
printScale: I.value.userOptions.print.scale,
isCursorPointer: pt.value,
onToggleFullscreen: Et,
onGeneratePdf: C(Ct),
onGenerateImage: It,
onGenerateSvg: Ft,
onToggleAnnotator: $,
onCopyAlt: Lt,
style: _({ visibility: C(V) ? C(B) ? "visible" : "hidden" : "visible" })
}, Se({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: w(({ isOpen: t, color: n }) => [x(e.$slots, "menuIcon", g(h({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: w(() => [x(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: w(() => [x(e.$slots, "optionImg", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: w(() => [x(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: w(({ toggleFullscreen: t, isFullscreen: n }) => [x(e.$slots, "optionFullscreen", g(h({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: w(({ toggleAnnotator: t, isAnnotator: n }) => [x(e.$slots, "optionAnnotator", g(h({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: w(({ altCopy: t }) => [x(e.$slots, "optionAltCopy", g(h({ altCopy: t })), void 0, !0)]),
key: "6"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: w(() => [x(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "7"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: w(() => [x(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "8"
} : void 0
]), 1032, [
"backgroundColor",
"color",
"isPrinting",
"isImaging",
"uid",
"hasPdf",
"hasImg",
"hasSvg",
"hasFullscreen",
"hasAltCopy",
"isFullscreen",
"chartElement",
"position",
"titles",
"hasAnnotator",
"isAnnotation",
"callbacks",
"printScale",
"isCursorPointer",
"onGeneratePdf",
"style"
])) : d("", !0),
(v(), f("svg", {
ref_key: "svgRef",
ref: H,
xmlns: C(re),
class: Te({
"vue-data-ui-fullscreen--on": Z.value,
"vue-data-ui-fulscreen--off": !Z.value,
"vue-ui-bullet-svg": !0
}),
viewBox: `0 0 ${W.value.width} ${W.value.height}`,
style: _(`width: 100%; overflow: visible; background:transparent;color:${I.value.style.chart.color}`),
"aria-labelledby": `bullet-svg-title-${P.value}`,
"aria-describedby": `bullet-svg-desc-${P.value}`
}, [
Ce(C(T)),
p("title", { id: `bullet-svg-title-${P.value}` }, S(I.value.style.chart.title.text || "Bullet chart"), 9, Fe),
p("desc", { id: `bullet-svg-desc-${P.value}` }, " Value: " + S(K.value) + ", Target: " + S(q.value.target?.value), 9, Ie),
e.$slots["chart-background"] ? (v(), f("foreignObject", {
key: 0,
x: 0,
y: 0,
width: W.value.width,
height: W.value.height,
style: { pointerEvents: "none" }
}, [x(e.$slots, "chart-background", {}, void 0, !0)], 8, Le)) : d("", !0),
N.value ? (v(), f("g", Re, [
(v(!0), f(c, null, b(q.value.chunks, (e) => (v(), f("rect", {
x: e.x,
y: e.y,
height: e.height,
width: e.width,
fill: e.color,
"stroke-width": 1,
stroke: I.value.style.chart.backgroundColor,
style: { transition: "x 0.3s ease-in-out, width 0.3s ease-in-out" }
}, null, 8, ze))), 256)),
!I.value.style.chart.target.onTop && I.value.style.chart.target.show ? (v(), f("rect", {
key: 0,
x: q.value.target.x,
y: W.value.top + (W.value.chartHeight - W.value.chartHeight * I.value.style.chart.target.heightRatio) / 2,
height: W.value.chartHeight * I.value.style.chart.target.heightRatio,
width: I.value.style.chart.target.width,
rx: I.value.style.chart.target.rounded ? I.value.style.chart.target.width / 2 : 0,
fill: I.value.style.chart.target.color,
stroke: I.value.style.chart.target.stroke,
"stroke-width": I.value.style.chart.target.strokeWidth
}, null, 8, Be)) : d("", !0),
p("rect", {
x: W.value.left,
y: W.value.top + (W.value.chartHeight - W.value.chartHeight * I.value.style.chart.valueBar.heightRatio) / 2,
height: W.value.chartHeight * I.value.style.chart.valueBar.heightRatio,
width: q.value.value.width,
fill: I.value.style.chart.valueBar.color,
stroke: I.value.style.chart.valueBar.stroke,
"stroke-width": I.value.style.chart.valueBar.strokeWidth
}, null, 8, Ve),
I.value.style.chart.valueBar.label.show ? (v(), f("text", {
key: 1,
x: W.value.left + q.value.value.width,
y: W.value.top - 6 + I.value.style.chart.valueBar.label.offsetY,
"font-size": I.value.style.chart.valueBar.label.fontSize,
"font-weight": I.value.style.chart.valueBar.label.bold ? "bold" : "normal",
fill: I.value.style.chart.valueBar.label.color,
"text-anchor": "middle"
}, S(C(o)(I.value.style.chart.segments.dataLabels.formatter, K.value, C(i)({
p: I.value.style.chart.segments.dataLabels.prefix,
v: K.value,
s: I.value.style.chart.segments.dataLabels.suffix,
r: I.value.style.chart.segments.dataLabels.rounding
}))), 9, He)) : d("", !0),
I.value.style.chart.target.onTop && I.value.style.chart.target.show ? (v(), f("rect", {
key: 2,
x: q.value.target.x,
y: W.value.top + (W.value.chartHeight - W.value.chartHeight * I.value.style.chart.target.heightRatio) / 2,
height: W.value.chartHeight * I.value.style.chart.target.heightRatio,
width: I.value.style.chart.target.width,
rx: I.value.style.chart.target.rounded ? I.value.style.chart.target.width / 2 : 0,
fill: I.value.style.chart.target.color,
stroke: I.value.style.chart.target.stroke,
"stroke-width": I.value.style.chart.target.strokeWidth,
style: { transition: "x 0.3s ease-in-out" }
}, null, 8, Ue)) : d("", !0),
I.value.style.chart.segments.dataLabels.show ? (v(), f("g", We, [(v(!0), f(c, null, b(q.value.ticks, (e) => (v(), f("text", {
x: e.x,
y: e.y,
"text-anchor": "middle",
fill: I.value.style.chart.segments.dataLabels.color,
"font-size": I.value.style.chart.segments.dataLabels.fontSize + "px",
"font-weight": I.value.style.chart.segments.dataLabels.bold ? "bold" : "normal"
}, S(C(o)(I.value.style.chart.segments.dataLabels.formatter, e.value, C(i)({
p: I.value.style.chart.segments.dataLabels.prefix,
v: e.value,
s: I.value.style.chart.segments.dataLabels.suffix,
r: I.value.style.chart.segments.dataLabels.rounding
}))), 9, Ge))), 256))])) : d("", !0),
I.value.style.chart.segments.dataLabels.show && I.value.style.chart.segments.ticks.show ? (v(), f("g", Ke, [(v(!0), f(c, null, b(q.value.ticks, (e) => (v(), f("line", {
x1: e.x,
x2: e.x,
y1: W.value.bottom,
y2: W.value.bottom + 3,
stroke: I.value.style.chart.segments.ticks.stroke,
"stroke-width": 1,
"stroke-linecap": "round"
}, null, 8, qe))), 256))])) : d("", !0)
])) : d("", !0),
x(e.$slots, "svg", { svg: {
...W.value,
isPrintingImg: C(Y) || C(X) || A.value,
isPrintingSvg: j.value
} }, void 0, !0)
], 14, Pe)),
e.$slots.watermark ? (v(), f("div", Je, [x(e.$slots, "watermark", g(h({ isPrinting: C(Y) || C(X) || A.value || j.value })), void 0, !0)])) : d("", !0),
p("div", { id: `legend-bottom-${P.value}` }, null, 8, Ye),
lt.value && (I.value.style.chart.legend.show || e.$slots.legend) ? (v(), u(xe, {
key: 5,
to: I.value.style.chart.legend.position === "top" ? `#legend-top-${P.value}` : `#legend-bottom-${P.value}`
}, [p("div", {
ref_key: "chartLegend",
ref: ot
}, [x(e.$slots, "legend", { legend: J.value }, () => [I.value.style.chart.legend.show ? (v(), u(ye, {
key: 0,
clickable: !1,
legendSet: J.value,
config: St.value
}, {
item: w(({ legend: e }) => [C(L) ? d("", !0) : (v(), f("div", Xe, [p("span", Ze, S(e.name) + ":", 1), p("span", null, S(e.value), 1)]))]),
_: 1
}, 8, ["legendSet", "config"])) : d("", !0)], !0)], 512)], 8, ["to"])) : d("", !0),
e.$slots.source ? (v(), f("div", {
key: 6,
ref_key: "source",
ref: st,
dir: "auto"
}, [x(e.$slots, "source", {}, void 0, !0)], 512)) : d("", !0),
x(e.$slots, "skeleton", {}, () => [C(L) ? (v(), u(le, { key: 0 })) : d("", !0)], !0)
], 46, je));
}
}, [["__scopeId", "data-v-c7fbc385"]]);
//#endregion
export { Ae as n, T as t };