vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
667 lines (663 loc) • 28.4 kB
JavaScript
import { defineAsyncComponent as j, ref as d, computed as i, onMounted as Xe, toRefs as Ye, watch as he, onBeforeUnmount as Je, createElementBlock as n, openBlock as s, unref as r, normalizeStyle as V, normalizeClass as de, createBlock as _, createCommentVNode as c, createElementVNode as $, withCtx as f, renderSlot as v, normalizeProps as b, guardReactiveProps as p, createSlots as Ke, createVNode as Qe, Fragment as G, renderList as q, toDisplayString as T, Teleport as Ze } from "vue";
import { u as et, a as X } from "./useNestedProp-OFRiX4kU.js";
import { c as tt, t as at, q as lt, N as ot, m as st, a as P, d as M, X as rt, o as ge, g as fe, l as nt } from "./lib-BwysEpWI.js";
import { t as ut, u as it } from "./useResponsive-DfdjqQps.js";
import { u as ct } from "./usePrinter-BJzHDpYF.js";
import { u as vt, B as ht } from "./BaseScanner-BMpwQAfz.js";
import { u as dt } from "./useSvgExport-ByUukOZt.js";
import { u as gt } from "./useThemeCheck-DGJ31Vi5.js";
import { u as ft } from "./useUserOptionState-BIvW1Kz7.js";
import { u as mt } from "./useChartAccessibility-9icAAmYg.js";
import yt from "./Legend-D6z73edh.js";
import bt from "./Title-DGnfNZuO.js";
import pt from "./img-DKigoPDs.js";
import { _ as kt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const me = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, segments: { baseColor: "#5A5A5A", dataLabels: { color: "#CCCCCC" }, ticks: { stroke: "#5A5A5A" } }, target: { color: "#1A1A1A" }, valueBar: { color: "#CCCCCC", stroke: "#5A5A5A", label: { color: "#CCCCCC" } } } } }, ye = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, segments: { baseColor: "#D32F2F", dataLabels: { color: "#424242" }, ticks: { stroke: "#424242" } }, target: { color: "#3A3A3A" }, valueBar: { color: "#3A3A3A", stroke: "#FFF8E1", label: { color: "#424242" } } } } }, be = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, segments: { baseColor: "#D32F2F", dataLabels: { color: "#BDBDBD" }, ticks: { stroke: "#BDBDBD" } }, target: { color: "#3A3A3A" }, valueBar: { color: "#3A3A3A", stroke: "#1E1E1E", label: { color: "#BDBDBD" } } } } }, pe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, segments: { baseColor: "#00AA00", dataLabels: { color: "#66CC66" }, ticks: { stroke: "#00AA00" } }, target: { color: "#023602" }, valueBar: { color: "#1b291b", stroke: "#1A1A1A", label: { color: "#66CC66" } } } } }, ke = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, segments: { baseColor: "#8F837A", dataLabels: { color: "#8A9892" }, ticks: { stroke: "#8F837A" } }, target: { color: "#40403a" }, valueBar: { color: "#8F837A", stroke: "#fbfafa", label: { color: "#8A9892" } } } } }, Ce = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", legend: { backgroundColor: "#fbfafa", color: "#50606C" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, segments: { baseColor: "#718890", dataLabels: { color: "#50606C" }, ticks: { stroke: "#50606C" } }, target: { color: "#50606C" }, valueBar: { color: "#50606C", stroke: "#fbfafa", label: { color: "#50606C" } } } } }, Ae = {
default: {},
dark: me,
celebration: ye,
celebrationNight: be,
hack: pe,
zen: ke,
concrete: Ce
}, aa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: ye,
celebrationNight: be,
concrete: Ce,
dark: me,
default: Ae,
hack: pe,
zen: ke
}, Symbol.toStringTag, { value: "Module" })), Ct = ["id"], At = {
key: 1,
ref: "noTitle",
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, wt = ["id"], Bt = ["xmlns", "viewBox"], xt = ["width", "height"], _t = { key: 1 }, $t = ["x", "y", "height", "width", "fill", "stroke"], Lt = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], Ft = ["x", "y", "height", "width", "fill", "stroke", "stroke-width"], Ot = ["x", "y", "font-size", "font-weight", "fill"], St = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], Dt = { key: 3 }, Et = ["x", "y", "fill", "font-size", "font-weight"], It = { key: 4 }, Tt = ["x1", "x2", "y1", "y2", "stroke"], Pt = {
key: 4,
class: "vue-data-ui-watermark"
}, Mt = ["id"], zt = {
key: 0,
class: "vue-ui-bullet-legend-item",
dir: "auto"
}, Ht = { style: { "margin-right": "2px" } }, Nt = {
__name: "vue-ui-bullet",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
setup(we, { expose: Be }) {
const xe = j(() => import("./PackageVersion-BLzm8l_I.js")), _e = j(() => import("./PenAndPaper-DxIUvoQ8.js")), $e = j(() => import("./UserOptions-CzJWRC4s.js")), { vue_ui_bullet: Le } = et(), { isThemeValid: Fe, warnInvalidTheme: Oe } = gt(), L = we, C = d(null), Y = d(null), J = d(0), K = d(null), Q = d(null), Se = d(0), F = d(null), D = d(null), Z = d(!1), w = i({
get: () => h.value.hasOwnProperty("value"),
set: (t) => t
}), O = i(() => h.value.segments ? Array.isArray(h.value.segments) ? h.value.segments.length ? !0 : (console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure:
segments: [
{
name: string;
from: number;
to: number;
color?: string;
},
{...}
]
`), w.value = !1, !1) : (console.warn(`VueUiBullet: dataset segments must be an array of objects with this datastructure:
segments: [
{
name: string;
from: number;
to: number;
color?: string;
},
{...}
]
`), w.value = !1, !1) : (console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure:
segments: [
{
name: string;
from: number;
to: number;
color?: string;
},
{...}
]
`), w.value = !1, !1)), ee = i(() => !!e.value.debug), De = i(() => {
const { top: t, right: l, bottom: a, left: u } = e.value.style.chart.padding;
return {
top: t,
right: l,
bottom: a,
left: u
};
});
function te() {
if (ge(h.value) ? (fe({
componentName: "VueUiBullet",
type: "dataset",
debug: ee.value
}), E.value = !0) : O.value ? h.value.segments.forEach((t, l) => {
nt({
datasetObject: t,
requiredAttributes: ["name", "from", "to"]
}).forEach((a) => {
w.value = !1, fe({
componentName: "VueUiBullet segment",
type: "datasetSerieAttribute",
property: a,
index: l,
debug: ee.value
});
});
}) : (w.value = !1, E.value = !0), ge(h.value) || (E.value = e.value.loading), e.value.responsive) {
const t = ut(() => {
const { width: l, height: a } = it({
chart: C.value,
title: e.value.style.chart.title.text ? Y.value : null,
legend: e.value.style.chart.legend.show ? K.value : null,
source: Q.value,
padding: De.value
}), k = (e.value.style.chart.legend.show ? 24 : 0) || 12;
requestAnimationFrame(() => {
x.value.width = l, x.value.height = a - k;
});
});
F.value && (D.value && F.value.unobserve(D.value), F.value.disconnect()), F.value = new ResizeObserver(t), D.value = C.value.parentNode, F.value.observe(D.value);
}
e.value.style.chart.animation.show && !B.value && se(h.value.value || 0);
}
Xe(() => {
Z.value = !0, te();
});
const A = d(tt());
function z() {
const t = X({
userConfig: L.config,
defaultConfig: Le
}), l = t.theme;
if (!l) return t;
if (!Fe.value(t))
return Oe(t), t;
const a = X({
userConfig: Ae[l] || L.config,
defaultConfig: t
});
return X({
userConfig: L.config,
defaultConfig: a
});
}
const e = d(z()), { loading: B, FINAL_DATASET: h, manualLoading: E } = vt({
...Ye(L),
FINAL_CONFIG: e,
prepareConfig: z,
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: at({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
segments: {
dataLabels: { show: !1 },
ticks: {
stroke: "#8A8A8A"
}
},
valueBar: {
label: { show: !1 }
}
}
}
}
})
}), { userOptionsVisible: H, setUserOptionsVisibility: ae, keepUserOptionState: le } = ft({ config: e.value }), { svgRef: N } = mt({ config: e.value.style.chart.title }), x = d({
width: e.value.style.chart.width,
height: e.value.style.chart.height
}), Ee = i(() => x.value.width), Ie = i(() => x.value.height);
he(() => L.config, (t) => {
B.value || (e.value = z()), H.value = !e.value.userOptions.showOnChartHover, x.value.width = e.value.style.chart.width, x.value.height = e.value.style.chart.height, te(), J.value += 1;
}, { deep: !0 });
const o = i(() => {
const t = Ie.value, l = Ee.value, a = e.value.style.chart.padding.left, u = l - e.value.style.chart.padding.right, k = e.value.style.chart.padding.top, g = t - e.value.style.chart.padding.bottom;
return {
height: Math.max(1e-3, t),
width: Math.max(1e-3, l),
left: a,
right: u,
top: k,
bottom: g,
chartWidth: Math.max(1e-3, u - a),
chartHeight: Math.max(1e-3, g - k)
};
}), Te = i(() => {
if (!O.value) return [];
const t = [];
for (let l = 0; l < h.value.segments.length; l += 1)
t.push(lt(e.value.style.chart.segments.baseColor, l / h.value.segments.length));
return t;
}), R = i(() => O.value ? {
min: Math.min(...h.value.segments.map((t) => t.from)),
max: Math.max(...h.value.segments.map((t) => t.to))
} : { min: 0, max: 1 }), m = d(Pe());
he(() => h.value, (t) => {
t.hasOwnProperty("value") && (E.value = !1), e.value.style.chart.animation.show && !B.value ? se(t.value || 0) : m.value = t.value || 0;
}, { deep: !0 });
function Pe() {
return e.value.style.chart.animation.show && !B.value ? R.value.min : h.value.value || 0;
}
const oe = d(null);
function se(t) {
const l = Math.abs(t - m.value) / e.value.style.chart.animation.animationFrames;
function a() {
m.value < t ? m.value = Math.min(m.value + l, t) : m.value > t && (m.value = Math.max(m.value - l, t)), m.value !== t && (oe.value = requestAnimationFrame(a));
}
a();
}
Je(() => {
cancelAnimationFrame(oe.value);
});
const y = i(() => {
if (!O.value)
return [];
const t = ot(R.value.min, R.value.max, e.value.style.chart.segments.ticks.divisions), l = t.min >= 0 ? 0 : Math.abs(t.min), a = {
x: o.value.left + (h.value.target + l) / (t.max + l) * o.value.chartWidth - e.value.style.chart.target.width / 2
}, u = {
width: (m.value + l) / (t.max + l) * o.value.chartWidth
}, k = t.ticks.map((g) => ({
value: g,
y: o.value.bottom + e.value.style.chart.segments.dataLabels.fontSize + 3 + e.value.style.chart.segments.dataLabels.offsetY,
x: o.value.left + (g + l) / (t.max + l) * o.value.chartWidth
}));
return {
scale: t,
target: a,
value: u,
ticks: k,
chunks: h.value.segments.map((g, qe) => ({
...g,
color: g.color ? st(g.color) : Te.value[qe],
x: o.value.left + o.value.chartWidth * ((g.from + l) / (t.max + l)),
y: o.value.top,
height: o.value.chartHeight,
width: o.value.chartWidth * (Math.abs(g.to - g.from) / (t.max + l))
}))
};
}), U = i(() => !y.value || !y.value.chunks || !y.value.chunks.length ? [] : y.value.chunks.map((t) => {
const l = P(
e.value.style.chart.segments.dataLabels.formatter,
t.from,
M({
p: e.value.style.chart.segments.dataLabels.prefix,
v: t.from,
s: e.value.style.chart.segments.dataLabels.suffix,
r: e.value.style.chart.segments.dataLabels.rounding
})
), a = P(
e.value.style.chart.segments.dataLabels.formatter,
t.to,
M({
p: e.value.style.chart.segments.dataLabels.prefix,
v: t.to,
s: e.value.style.chart.segments.dataLabels.suffix,
r: e.value.style.chart.segments.dataLabels.rounding
})
), u = `${l} — ${a}`;
return {
...t,
shape: "square",
value: u,
display: `${t.name}: ${u}`
};
})), Me = i(() => ({
cy: "bullet-div-legend",
backgroundColor: "transparent",
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 6,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
})), { isPrinting: re, isImaging: ne, generatePdf: ue, generateImage: ie } = ct({
elementId: `bullet_${A.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-bullet",
options: e.value.userOptions.print
}), ze = i(() => e.value.userOptions.show && !e.value.style.chart.title.text), S = d(!1);
function ce(t) {
S.value = t, Se.value += 1;
}
function He() {
return y.value;
}
const I = d(!1);
function W() {
I.value = !I.value;
}
async function Ne({ scale: t = 2 } = {}) {
if (!C.value) return;
const { width: l, height: a } = C.value.getBoundingClientRect(), u = l / a, { imageUri: k, base64: g } = await pt({ domElement: C.value, base64: !0, img: !0, scale: t });
return {
imageUri: k,
base64: g,
title: e.value.style.chart.title.text,
width: l,
height: a,
aspectRatio: u
};
}
const Re = i(() => U.value.map((t) => ({
...t,
name: t.display
}))), Ue = i(() => e.value.style.chart.backgroundColor), We = i(() => e.value.style.chart.legend), je = i(() => e.value.style.chart.title), { exportSvg: Ve, getSvg: Ge } = dt({
svg: N,
title: je,
legend: We,
legendItems: Re,
backgroundColor: Ue
});
function ve({ isCb: t }) {
t ? e.value.userOptions.callbacks.svg(Ge()) : Ve();
}
return Be({
getData: He,
getImage: Ne,
generatePdf: ue,
generateImage: ie,
generateSvg: ve,
toggleAnnotator: W,
toggleFullscreen: ce
}), (t, l) => (s(), n("div", {
ref_key: "bulletChart",
ref: C,
class: de(`vue-data-ui-component vue-ui-bullet ${S.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: V(`font-family:${e.value.style.fontFamily};width:100%;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
id: `bullet_${A.value}`,
onMouseenter: l[0] || (l[0] = () => r(ae)(!0)),
onMouseleave: l[1] || (l[1] = () => r(ae)(!1))
}, [
e.value.userOptions.buttons.annotator ? (s(), _(r(_e), {
key: 0,
svgRef: r(N),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: I.value,
onClose: W
}, {
"annotator-action-close": f(() => [
v(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": f(({ color: a }) => [
v(t.$slots, "annotator-action-color", b(p({ color: a })), void 0, !0)
]),
"annotator-action-draw": f(({ mode: a }) => [
v(t.$slots, "annotator-action-draw", b(p({ mode: a })), void 0, !0)
]),
"annotator-action-undo": f(({ disabled: a }) => [
v(t.$slots, "annotator-action-undo", b(p({ disabled: a })), void 0, !0)
]),
"annotator-action-redo": f(({ disabled: a }) => [
v(t.$slots, "annotator-action-redo", b(p({ disabled: a })), void 0, !0)
]),
"annotator-action-delete": f(({ disabled: a }) => [
v(t.$slots, "annotator-action-delete", b(p({ disabled: a })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : c("", !0),
ze.value ? (s(), n("div", At, null, 512)) : c("", !0),
e.value.style.chart.title.text ? (s(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: Y,
style: "width:100%;background:transparent;"
}, [
(s(), _(bt, {
lineHeight: "1.3rem",
key: `title_${J.value}`,
config: {
title: {
cy: "bullet-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "bullet-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : c("", !0),
$("div", {
id: `legend-top-${A.value}`
}, null, 8, wt),
e.value.userOptions.show && w.value && (r(le) || r(H)) ? (s(), _(r($e), {
key: 3,
ref: "details",
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: r(re),
isImaging: r(ne),
uid: A.value,
hasTooltip: !1,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasXls: !1,
hasTable: !1,
hasLabel: !1,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: S.value,
chartElement: C.value,
position: e.value.userOptions.position,
titles: { ...e.value.userOptions.buttonTitles },
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: I.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: ce,
onGeneratePdf: r(ue),
onGenerateImage: r(ie),
onGenerateSvg: ve,
onToggleAnnotator: W,
style: V({
visibility: r(le) ? r(H) ? "visible" : "hidden" : "visible"
})
}, Ke({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: f(({ isOpen: a, color: u }) => [
v(t.$slots, "menuIcon", b(p({ isOpen: a, color: u })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: f(() => [
v(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: f(() => [
v(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: f(() => [
v(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: f(({ toggleFullscreen: a, isFullscreen: u }) => [
v(t.$slots, "optionFullscreen", b(p({ toggleFullscreen: a, isFullscreen: u })), void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: f(({ toggleAnnotator: a, isAnnotator: u }) => [
v(t.$slots, "optionAnnotator", b(p({ toggleAnnotator: a, isAnnotator: u })), void 0, !0)
]),
key: "5"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : c("", !0),
(s(), n("svg", {
ref_key: "svgRef",
ref: N,
xmlns: r(rt),
class: de({ "vue-data-ui-fullscreen--on": S.value, "vue-data-ui-fulscreen--off": !S.value, "vue-ui-bullet-svg": !0 }),
viewBox: `0 0 ${o.value.width} ${o.value.height}`,
style: V(`width: 100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
}, [
Qe(r(xe)),
t.$slots["chart-background"] ? (s(), n("foreignObject", {
key: 0,
x: 0,
y: 0,
width: o.value.width,
height: o.value.height,
style: {
pointerEvents: "none"
}
}, [
v(t.$slots, "chart-background", {}, void 0, !0)
], 8, xt)) : c("", !0),
O.value ? (s(), n("g", _t, [
(s(!0), n(G, null, q(y.value.chunks, (a) => (s(), n("rect", {
x: a.x,
y: a.y,
height: a.height,
width: a.width,
fill: a.color,
"stroke-width": 1,
stroke: e.value.style.chart.backgroundColor,
style: { transition: "x 0.3s ease-in-out, width 0.3s ease-in-out" }
}, null, 8, $t))), 256)),
!e.value.style.chart.target.onTop && e.value.style.chart.target.show ? (s(), n("rect", {
key: 0,
x: y.value.target.x,
y: o.value.top + (o.value.chartHeight - o.value.chartHeight * e.value.style.chart.target.heightRatio) / 2,
height: o.value.chartHeight * e.value.style.chart.target.heightRatio,
width: e.value.style.chart.target.width,
rx: e.value.style.chart.target.rounded ? e.value.style.chart.target.width / 2 : 0,
fill: e.value.style.chart.target.color,
stroke: e.value.style.chart.target.stroke,
"stroke-width": e.value.style.chart.target.strokeWidth
}, null, 8, Lt)) : c("", !0),
$("rect", {
x: o.value.left,
y: o.value.top + (o.value.chartHeight - o.value.chartHeight * e.value.style.chart.valueBar.heightRatio) / 2,
height: o.value.chartHeight * e.value.style.chart.valueBar.heightRatio,
width: y.value.value.width,
fill: e.value.style.chart.valueBar.color,
stroke: e.value.style.chart.valueBar.stroke,
"stroke-width": e.value.style.chart.valueBar.strokeWidth
}, null, 8, Ft),
e.value.style.chart.valueBar.label.show ? (s(), n("text", {
key: 1,
x: o.value.left + y.value.value.width,
y: o.value.top - 6 + e.value.style.chart.valueBar.label.offsetY,
"font-size": e.value.style.chart.valueBar.label.fontSize,
"font-weight": e.value.style.chart.valueBar.label.bold ? "bold" : "normal",
fill: e.value.style.chart.valueBar.label.color,
"text-anchor": "middle"
}, T(r(P)(
e.value.style.chart.segments.dataLabels.formatter,
m.value,
r(M)({
p: e.value.style.chart.segments.dataLabels.prefix,
v: m.value,
s: e.value.style.chart.segments.dataLabels.suffix,
r: e.value.style.chart.segments.dataLabels.rounding
})
)), 9, Ot)) : c("", !0),
e.value.style.chart.target.onTop && e.value.style.chart.target.show ? (s(), n("rect", {
key: 2,
x: y.value.target.x,
y: o.value.top + (o.value.chartHeight - o.value.chartHeight * e.value.style.chart.target.heightRatio) / 2,
height: o.value.chartHeight * e.value.style.chart.target.heightRatio,
width: e.value.style.chart.target.width,
rx: e.value.style.chart.target.rounded ? e.value.style.chart.target.width / 2 : 0,
fill: e.value.style.chart.target.color,
stroke: e.value.style.chart.target.stroke,
"stroke-width": e.value.style.chart.target.strokeWidth,
style: { transition: "x 0.3s ease-in-out" }
}, null, 8, St)) : c("", !0),
e.value.style.chart.segments.dataLabels.show ? (s(), n("g", Dt, [
(s(!0), n(G, null, q(y.value.ticks, (a) => (s(), n("text", {
x: a.x,
y: a.y,
"text-anchor": "middle",
fill: e.value.style.chart.segments.dataLabels.color,
"font-size": e.value.style.chart.segments.dataLabels.fontSize + "px",
"font-weight": e.value.style.chart.segments.dataLabels.bold ? "bold" : "normal"
}, T(r(P)(
e.value.style.chart.segments.dataLabels.formatter,
a.value,
r(M)({
p: e.value.style.chart.segments.dataLabels.prefix,
v: a.value,
s: e.value.style.chart.segments.dataLabels.suffix,
r: e.value.style.chart.segments.dataLabels.rounding
})
)), 9, Et))), 256))
])) : c("", !0),
e.value.style.chart.segments.dataLabels.show && e.value.style.chart.segments.ticks.show ? (s(), n("g", It, [
(s(!0), n(G, null, q(y.value.ticks, (a) => (s(), n("line", {
x1: a.x,
x2: a.x,
y1: o.value.bottom,
y2: o.value.bottom + 3,
stroke: e.value.style.chart.segments.ticks.stroke,
"stroke-width": 1,
"stroke-linecap": "round"
}, null, 8, Tt))), 256))
])) : c("", !0)
])) : c("", !0),
v(t.$slots, "svg", { svg: o.value }, void 0, !0)
], 14, Bt)),
t.$slots.watermark ? (s(), n("div", Pt, [
v(t.$slots, "watermark", b(p({ isPrinting: r(re) || r(ne) })), void 0, !0)
])) : c("", !0),
$("div", {
id: `legend-bottom-${A.value}`
}, null, 8, Mt),
Z.value ? (s(), _(Ze, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${A.value}` : `#legend-bottom-${A.value}`
}, [
$("div", {
ref_key: "chartLegend",
ref: K
}, [
e.value.style.chart.legend.show ? (s(), _(yt, {
key: 0,
clickable: !1,
legendSet: U.value,
config: Me.value
}, {
item: f(({ legend: a }) => [
r(B) ? c("", !0) : (s(), n("div", zt, [
$("span", Ht, T(a.name) + ":", 1),
$("span", null, T(a.value), 1)
]))
]),
_: 1
}, 8, ["legendSet", "config"])) : c("", !0),
v(t.$slots, "legend", { legend: U.value }, void 0, !0)
], 512)
], 8, ["to"])) : c("", !0),
t.$slots.source ? (s(), n("div", {
key: 6,
ref_key: "source",
ref: Q,
dir: "auto"
}, [
v(t.$slots, "source", {}, void 0, !0)
], 512)) : c("", !0),
r(B) ? (s(), _(ht, { key: 7 })) : c("", !0)
], 46, Ct));
}
}, Rt = /* @__PURE__ */ kt(Nt, [["__scopeId", "data-v-7902e6f9"]]), la = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Rt
}, Symbol.toStringTag, { value: "Module" }));
export {
aa as a,
la as b,
Rt as v
};