vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
792 lines (791 loc) • 33.7 kB
JavaScript
import { defineAsyncComponent as Q, computed as h, ref as f, toRefs as Je, watch as ee, shallowRef as ze, onMounted as Ke, onBeforeUnmount as Qe, createElementBlock as o, openBlock as r, unref as n, normalizeStyle as te, normalizeClass as Fe, createBlock as j, createCommentVNode as c, createElementVNode as p, withCtx as X, toDisplayString as R, createSlots as et, renderSlot as S, normalizeProps as B, guardReactiveProps as U, createVNode as tt, Fragment as k, renderList as x, mergeProps as E, nextTick as at } from "vue";
import { u as lt, c as st, t as rt, a as ot, p as Ae, b as ut, d as nt, o as Ce, e as it, f as W, g as Oe, m as ae, N as A, O as ct, h as vt, X as ht, s as le, I as dt, r as ft, k as se, i as re, E as oe } from "./index-q-LPw2IT.js";
import { t as yt, u as mt } from "./useResponsive-DfdjqQps.js";
import { u as Ne } from "./useNestedProp-04aFeUYu.js";
import { u as gt } from "./usePrinter-DX7efa1s.js";
import { u as pt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as kt } from "./useChartAccessibility-9icAAmYg.js";
import bt from "./Title-B55R8CAZ.js";
import _t from "./img-Ctts6JQb.js";
import { u as wt, B as St } from "./useLoading-D7YHNtLX.js";
import { u as xt } from "./useAutoSizeLabelsInsideViewbox-bEAG5sD1.js";
import { _ as $t } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const zt = ["id"], Ft = { key: 0 }, At = ["xmlns", "viewBox"], Ct = ["width", "height"], Ot = ["id"], Nt = ["stop-color"], Mt = ["stop-color"], Pt = ["stop-color"], It = ["id"], Xt = ["stdDeviation"], Rt = { key: 1 }, Yt = ["d", "fill", "stroke"], Et = ["d", "fill", "stroke"], Lt = ["d", "fill"], Tt = ["id", "d"], Gt = ["fill", "font-size", "font-weight"], jt = ["href", "startOffset"], Bt = ["text-anchor", "fill", "font-size", "font-weight", "innerHTML"], Ut = ["d", "filter"], Wt = ["stroke", "stroke-width"], Dt = ["stroke", "stroke-width"], Vt = ["stroke", "stroke-width"], Ht = ["stroke", "stroke-width"], qt = { key: 8 }, Zt = ["x", "y", "text-anchor", "font-size", "font-weight", "fill"], Jt = ["x", "y", "font-size", "font-weight", "fill"], Kt = { key: 0 }, Qt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], ea = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], ta = ["x1", "y1", "x2", "y2", "stroke-width", "filter"], aa = { key: 1 }, la = ["d", "fill", "stroke", "stroke-width"], sa = ["cx", "cy", "fill", "r", "stroke-width", "stroke"], ra = ["x", "y", "font-size", "fill"], oa = {
key: 4,
class: "vue-data-ui-watermark"
}, ua = {
__name: "vue-ui-gauge",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
setup(D, { expose: Me }) {
const Pe = Q(() => import("./PenAndPaper-BJ0hcgsa.js")), Ie = Q(() => import("./UserOptions-DVzyjG-W.js")), Xe = Q(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_gauge: Re } = lt(), m = D, Ye = h(() => !!m.dataset && Object.keys(m.dataset).length > 0 && m.dataset.series && m.dataset.series.length), w = f(st()), Ee = f(null), ue = f(0), C = f(null), ne = f(null), ie = f(null), ce = f(null), ve = f(null), he = f(0), e = f(q()), { loading: de, FINAL_DATASET: $, manualLoading: M } = wt({
...Je(m),
FINAL_CONFIG: e,
prepareConfig: q,
callback: () => {
Promise.resolve().then(async () => {
await at();
});
},
skeletonDataset: {
value: 0,
series: [
{ from: -1, to: 0, name: "_", color: "#A1A1A1" },
{ from: 0, to: 1, name: "__", color: "#CACACA" }
]
},
skeletonConfig: rt({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
animation: { use: !1 },
layout: {
markers: { show: !1 },
segmentSeparators: { stroke: "#6A6A6A" },
segmentNames: { show: !1 },
indicatorArc: { fill: "#6A6A6A50" },
pointer: {
stroke: "#6A6A6A",
useRatingColor: !0,
circle: {
stroke: "#6A6A6A",
color: "#6A6A6A"
}
}
},
legend: {
show: !1
}
}
}
}
})
}), { userOptionsVisible: V, setUserOptionsVisibility: fe, keepUserOptionState: ye } = pt({ config: e.value }), { svgRef: H } = kt({ config: e.value.style.chart.title });
ee(() => m.config, (t) => {
de.value || (e.value = q()), V.value = !e.value.userOptions.showOnChartHover, J(), he.value += 1;
}, { deep: !0 }), ee(() => m.dataset, (t) => {
J(), t && Object.keys(t).length > 0 && (M.value = e.value?.loading ?? !1);
}, { deep: !0, immediate: !1 });
function q() {
const t = Ne({
userConfig: m.config,
defaultConfig: Re
});
return t.theme ? {
...Ne({
userConfig: ut.vue_ui_gauge[t.theme] || m.config,
defaultConfig: t
}),
customPalette: ot[t.theme] || Ae
} : t;
}
const { isPrinting: me, isImaging: ge, generatePdf: pe, generateImage: ke } = gt({
elementId: `vue-ui-gauge_${w.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-gauge",
options: e.value.userOptions.print
}), Le = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), Te = h(() => nt(e.value.customPalette)), O = h(() => {
if (Ce($.value.series || {}))
return {
value: 0,
series: [
{
from: 0,
to: 0
}
]
};
const t = [];
($.value.series || []).forEach((a) => {
t.push(a.from || 1e-7), t.push(a.to || 1e-7);
});
const u = Math.max(...t);
return {
...$.value,
series: ($.value.series || []).map((a, s) => ({
...a,
color: it(a.color) || Te.value[s] || Ae[s],
value: ((a.to || 0) - (a.from || 0)) / u * 100
}))
};
}), b = f(512), l = f({
height: 358.4,
width: b.value,
top: 0,
bottom: 358.4,
centerX: 179.2,
centerY: b.value / 2,
labelFontSize: 18,
legendFontSize: e.value.style.chart.legend.fontSize,
pointerRadius: e.value.style.chart.layout.pointer.circle.radius,
trackSize: e.value.style.chart.layout.track.size,
pointerSize: e.value.style.chart.layout.pointer.size,
pointerStrokeWidth: e.value.style.chart.layout.pointer.strokeWidth,
markerOffset: e.value.style.chart.layout.markers.offsetY + 3,
segmentFontSize: e.value.style.chart.layout.segmentNames.fontSize
}), P = f(0), z = f(0), y = f(
e.value.style.chart.animation.use ? Math.min(...$.value.series.map((t) => t.from)) : $.value.value
);
ee(() => $.value.value, () => {
we($.value.value);
});
const i = h(() => {
const t = l.value.width / 2, u = v.value.base, a = Math.PI * ((y.value + 0 - z.value) / (P.value - z.value)) + Math.PI;
return {
x1: t,
y1: u,
x2: t + v.value.pointerSize * l.value.pointerSize * 0.9 * Math.cos(a),
y2: u + v.value.pointerSize * l.value.pointerSize * 0.9 * Math.sin(a)
};
}), be = h(() => {
const t = l.value.width / 2, u = v.value.base, a = Math.PI * ((y.value + 0 - z.value) / (P.value - z.value)) + Math.PI, s = t + v.value.pointerSize * l.value.pointerSize * 0.9 * Math.cos(a), g = u + v.value.pointerSize * l.value.pointerSize * 0.9 * Math.sin(a), _ = l.value.pointerRadius, Ve = t + _ * Math.cos(a + Math.PI / 2), He = u + _ * Math.sin(a + Math.PI / 2), qe = t + _ * Math.cos(a - Math.PI / 2), Ze = u + _ * Math.sin(a - Math.PI / 2);
return isNaN(s) ? null : `M ${s},${g} ${Ve},${He} ${qe},${Ze} Z`;
}), Z = h(() => {
for (let t = 0; t < O.value.series.length; t += 1) {
const { color: u, from: a, to: s } = O.value.series[t];
if (y.value >= a && y.value <= s)
return u;
}
return "#2D353C";
}), F = ze(null), I = ze(null), L = h({
get: () => l.value.segmentFontSize,
set: (t) => t
}), { autoSizeLabels: _e } = xt({
svgRef: H,
fontSize: l.value.segmentFontSize,
minFontSize: e.value.style.chart.layout.segmentNames.minFontSize,
sizeRef: L,
labelClass: ".vue-ui-gauge-label-flat"
}), T = h(() => !!e.value.debug);
function J() {
let t = !1;
if (Ce(m.dataset) ? (W({
componentName: "VueUiGauge",
type: "dataset",
debug: T.value
}), M.value = !0, t = !0) : (Oe({
datasetObject: m.dataset,
requiredAttributes: ["value", "series"]
}).forEach((u) => {
W({
componentName: "VueUiGauge",
type: "datasetAttribute",
property: u,
debug: T.value
}), M.value = !0, t = !0;
}), Object.hasOwn(m.dataset, "series") && (m.dataset.series.length ? m.dataset.series.forEach((u, a) => {
Oe({
datasetObject: u,
requiredAttributes: ["from", "to"]
}).forEach((s) => {
W({
componentName: "VueUiGauge",
type: "datasetSerieAttribute",
property: s,
index: a,
debug: T.value
}), M.value = !0, t = !0;
});
}) : (W({
componentName: "VueUiGauge",
type: "datasetAttributeEmpty",
property: "series",
debug: T.value
}), M.value = !0, t = !0))), M.value = t, we($.value.value || 0), e.value.responsive) {
const u = yt(() => {
let { width: a, height: s } = mt({
chart: C.value,
title: e.value.style.chart.title.text ? ne.value : null,
legend: ie.value,
source: ce.value,
noTitle: ve.value
});
s -= 12, requestAnimationFrame(() => {
l.value.width = a, l.value.height = s, l.value.centerX = a / 2, l.value.centerY = b.value / 2 / 358.4 * s, l.value.bottom = s, l.value.labelFontSize = 18 / b.value * Math.min(s, a) < 10 ? 10 : 18 / b.value * Math.min(s, a), l.value.legendFontSize = e.value.style.chart.legend.fontSize / b.value * Math.min(s, a) < 14 ? 14 : e.value.style.chart.legend.fontSize / b.value * Math.min(s, a), l.value.pointerRadius = e.value.style.chart.layout.pointer.circle.radius / b.value * Math.min(s, a), l.value.trackSize = e.value.style.chart.layout.track.size / b.value * Math.min(s, a), l.value.pointerStrokeWidth = oe({
relator: Math.min(a, s),
adjuster: b.value,
source: e.value.style.chart.layout.pointer.strokeWidth,
threshold: 2,
fallback: 2
}), l.value.markerOffset = oe({
relator: Math.max(a, s),
adjuster: b.value,
source: e.value.style.chart.layout.markers.offsetY + 3,
threshold: 2,
fallback: 2
}), l.value.segmentFontSize = oe({
relator: Math.min(a, s),
adjuster: b.value,
source: e.value.style.chart.layout.segmentNames.fontSize,
threshold: 8,
fallback: 8
});
}), _e();
});
F.value && (I.value && F.value.unobserve(I.value), F.value.disconnect()), F.value = new ResizeObserver(u), I.value = C.value.parentNode, F.value.observe(I.value);
}
_e();
}
Ke(() => {
J();
}), Qe(() => {
F.value && (I.value && F.value.unobserve(I.value), F.value.disconnect());
});
function we(t) {
const u = [];
(O.value.series || []).forEach((_) => {
u.push(_.from || 0), u.push(_.to || 0);
}), P.value = Math.max(...u), z.value = Math.min(...u);
let a = e.value.style.chart.animation.speed;
const s = Math.abs(t - y.value) / (a * 60);
function g() {
y.value < t ? y.value = Math.min(y.value + s, t) : y.value > t && (y.value = Math.max(y.value - s, t)), y.value !== t && requestAnimationFrame(g);
}
g();
}
const v = h(() => {
const t = e.value.responsive ? Math.min(l.value.width, l.value.height) : l.value.width, u = 2.5 / e.value.style.chart.layout.radiusRatio;
return {
arcs: t / u,
gradients: t / (u * 1.1),
base: e.value.responsive ? l.value.height / 1.618 : l.value.height * 0.7,
ratingBase: e.value.responsive ? l.value.height / 2 + l.value.height / 4 : l.value.height * 0.9,
pointerSize: e.value.responsive ? Math.min(l.value.width, l.value.height) / 3 : l.value.width / 3.2
};
}), d = h(() => ae(
{ series: O.value.series },
l.value.width / 2,
v.value.base,
v.value.arcs,
v.value.arcs,
1,
1,
1,
180,
109.9495,
40 * l.value.trackSize
)), Ge = h(() => ae(
{ series: O.value.series },
l.value.width / 2,
v.value.base,
v.value.arcs * e.value.style.chart.layout.segmentNames.offsetRatio,
v.value.arcs * e.value.style.chart.layout.segmentNames.offsetRatio,
1,
1,
1,
180,
109.9495,
40 * l.value.trackSize
)), N = h(() => d.value.map((t) => v.value.arcs * e.value.style.chart.layout.segmentNames.offsetRatio * (t.nameOffsetRatio || 1))), Se = h(() => {
const { x: t, y: u } = A({
initX: d.value[0].firstSeparator.x,
initY: d.value[0].firstSeparator.y,
centerX: i.value.x1,
centerY: i.value.y1,
offset: -e.value.style.chart.layout.segmentSeparators.offsetIn
}), { x: a, y: s } = A({
initX: d.value[0].startX,
initY: d.value[0].startY,
centerX: i.value.x1,
centerY: i.value.y1,
offset: e.value.style.chart.layout.segmentSeparators.offsetOut
});
return { x1: t, y1: u, x2: a, y2: s };
}), xe = h(() => d.value.map((t) => {
const { x: u, y: a } = A({
initX: t.separator.x,
initY: t.separator.y,
centerX: i.value.x1,
centerY: i.value.y1,
offset: -e.value.style.chart.layout.segmentSeparators.offsetIn
}), { x: s, y: g } = A({
initX: t.endX,
initY: t.endY,
centerX: i.value.x1,
centerY: i.value.y1,
offset: e.value.style.chart.layout.segmentSeparators.offsetOut
});
return { x1: u, y1: a, x2: s, y2: g };
}));
function je(t) {
if (t.reduce((g, _) => g + _, 0) > 100)
throw new Error("Total % must not exceed 100");
const a = 50;
let s = 0;
return t.map((g) => (s += g, `${s / 100 * a - g / 4}%`));
}
const Be = h(() => je(d.value.map((t) => t.proportion * 100))), Ue = h(() => ae(
{ series: O.value.series },
l.value.width / 2,
v.value.base,
v.value.gradients,
v.value.gradients,
0.95,
1,
1,
180,
110.02,
2 * l.value.trackSize
)), We = h(() => {
const t = z.value >= 0 ? -z.value : Math.abs(z.value);
return ct({
radius: e.value.style.chart.layout.indicatorArc.radius * l.value.trackSize,
centerX: l.value.width / 2,
centerY: v.value.base,
percentage: vt((y.value + t) / (P.value + t))
});
}), Y = f(!1);
function $e(t) {
Y.value = t, ue.value += 1;
}
const G = f(!1);
function K() {
G.value = !G.value;
}
async function De({ scale: t = 2 } = {}) {
if (!C.value) return;
const { width: u, height: a } = C.value.getBoundingClientRect(), s = u / a, { imageUri: g, base64: _ } = await _t({ domElement: C.value, base64: !0, img: !0, scale: t });
return {
imageUri: g,
base64: _,
title: e.value.style.chart.title.text,
width: u,
height: a,
aspectRatio: s
};
}
return Me({
getImage: De,
generatePdf: pe,
generateImage: ke,
toggleAnnotator: K,
toggleFullscreen: $e
}), (t, u) => (r(), o("div", {
class: Fe(`vue-ui-gauge ${Y.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
ref_key: "gaugeChart",
ref: C,
id: `vue-ui-gauge_${w.value}`,
style: te(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: u[0] || (u[0] = () => n(fe)(!0)),
onMouseleave: u[1] || (u[1] = () => n(fe)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), j(n(Pe), {
key: 0,
svgRef: n(H),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: G.value,
onClose: K
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : c("", !0),
Le.value ? (r(), o("div", {
key: 1,
ref_key: "noTitle",
ref: ve,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : c("", !0),
e.value.style.chart.title.text ? (r(), o("div", {
key: 2,
ref_key: "chartTitle",
ref: ne,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(r(), j(bt, {
key: `title_${he.value}`,
config: {
title: {
cy: "gauge-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "gauge-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, {
default: X(() => [
e.value.translations.base && D.dataset.base ? (r(), o("span", Ft, R(e.value.translations.base) + ": " + R(D.dataset.base), 1)) : c("", !0)
]),
_: 1
}, 8, ["config"]))
], 512)) : c("", !0),
e.value.userOptions.show && Ye.value && (n(ye) || n(V)) ? (r(), j(n(Ie), {
ref_key: "details",
ref: Ee,
key: `user_options_${ue.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isImaging: n(ge),
isPrinting: n(me),
uid: w.value,
hasXls: !1,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: Y.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: C.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: G.value,
onToggleFullscreen: $e,
onGeneratePdf: n(pe),
onGenerateImage: n(ke),
onToggleAnnotator: K,
style: te({
visibility: n(ye) ? n(V) ? "visible" : "hidden" : "visible"
})
}, et({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: X(({ isOpen: a, color: s }) => [
S(t.$slots, "menuIcon", B(U({ isOpen: a, color: s })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: X(() => [
S(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: X(() => [
S(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: X(({ toggleFullscreen: a, isFullscreen: s }) => [
S(t.$slots, "optionFullscreen", B(U({ toggleFullscreen: a, isFullscreen: s })), void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: X(({ toggleAnnotator: a, isAnnotator: s }) => [
S(t.$slots, "optionAnnotator", B(U({ toggleAnnotator: a, isAnnotator: s })), void 0, !0)
]),
key: "4"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "callbacks", "printScale", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : c("", !0),
(r(), o("svg", {
ref_key: "svgRef",
ref: H,
xmlns: n(ht),
class: Fe({ "vue-data-ui-fullscreen--on": Y.value, "vue-data-ui-fulscreen--off": !Y.value }),
viewBox: `0 0 ${l.value.width <= 0 ? 10 : l.value.width} ${l.value.height <= 0 ? 10 : l.value.height}`,
style: te(`max-width:100%;overflow:hidden !important;background:transparent;color:${e.value.style.chart.color}`)
}, [
tt(n(Xe)),
t.$slots["chart-background"] ? (r(), o("foreignObject", {
key: 0,
x: 0,
y: 0,
width: l.value.width <= 0 ? 10 : l.value.width,
height: l.value.height <= 0 ? 10 : l.value.height,
style: {
pointerEvents: "none"
}
}, [
S(t.$slots, "chart-background", {}, void 0, !0)
], 8, Ct)) : c("", !0),
p("defs", null, [
p("radialGradient", {
id: `gradient_${w.value}`,
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
p("stop", {
offset: "0%",
"stop-color": n(le)("#FFFFFF", 1)
}, null, 8, Nt),
p("stop", {
offset: "80%",
"stop-color": n(le)("#FFFFFF", e.value.style.chart.layout.track.gradientIntensity)
}, null, 8, Mt),
p("stop", {
offset: "100%",
"stop-color": n(le)("#FFFFFF", 1)
}, null, 8, Pt)
], 8, Ot)
]),
p("defs", null, [
p("filter", {
id: `blur_${w.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [
p("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 100 / e.value.style.chart.layout.track.gradientIntensity
}, null, 8, Xt)
], 8, It)
]),
t.$slots.pattern ? (r(), o("g", Rt, [
(r(!0), o(k, null, x(d.value, (a, s) => (r(), o("defs", null, [
S(t.$slots, "pattern", E({ ref_for: !0 }, { seriesIndex: s, patternId: `pattern_${w.value}_${s}` }), void 0, !0)
]))), 256))
])) : c("", !0),
(r(!0), o(k, null, x(d.value, (a, s) => (r(), o("path", {
key: `arc_${s}`,
d: a.arcSlice,
fill: a.color,
stroke: e.value.style.chart.backgroundColor,
"stroke-linecap": "round"
}, null, 8, Yt))), 128)),
t.$slots.pattern ? (r(!0), o(k, { key: 2 }, x(d.value, (a, s) => (r(), o("path", {
key: `arc_${s}`,
d: a.arcSlice,
fill: `url(#pattern_${w.value}_${s})`,
stroke: e.value.style.chart.backgroundColor,
"stroke-linecap": "round"
}, null, 8, Et))), 128)) : c("", !0),
e.value.style.chart.layout.indicatorArc.show ? (r(), o("path", {
key: 3,
d: We.value,
fill: e.value.style.chart.layout.indicatorArc.fill
}, null, 8, Lt)) : c("", !0),
e.value.style.chart.layout.segmentNames.show && e.value.style.chart.layout.segmentNames.curved ? (r(), o(k, { key: 4 }, [
(r(!0), o(k, null, x(d.value, (a, s) => (r(), o("path", {
id: `curve_${w.value}_${s}`,
d: `M ${i.value.x1},${i.value.y1} m -${N.value[s]},0 a ${N.value[s]},${N.value[s]} 0 1,1 ${2 * N.value[s]},0 a ${N.value[s]},${N.value[s]} 0 1,1 -${2 * N.value[s]},0`,
fill: "transparent"
}, null, 8, Tt))), 256)),
(r(!0), o(k, null, x(d.value, (a, s) => (r(), o("text", {
fill: e.value.style.chart.layout.segmentNames.useSerieColor ? a.color : e.value.style.chart.layout.segmentNames.color,
"font-size": L.value,
"font-weight": e.value.style.chart.layout.segmentNames.bold ? "bold" : "normal",
"text-anchor": "middle"
}, [
p("textPath", {
href: `#curve_${w.value}_${s}`,
startOffset: Be.value[s]
}, R(a.name || ""), 9, jt)
], 8, Gt))), 256))
], 64)) : c("", !0),
e.value.style.chart.layout.segmentNames.show && !e.value.style.chart.layout.segmentNames.curved ? (r(!0), o(k, { key: 5 }, x(Ge.value, (a, s) => (r(), o("text", {
class: "vue-ui-gauge-label-flat",
"text-anchor": n(ft)(a, !1, 12).anchor,
fill: e.value.style.chart.layout.segmentNames.useSerieColor ? a.color : e.value.style.chart.layout.segmentNames.color,
"font-size": L.value,
"font-weight": e.value.style.chart.layout.segmentNames.bold ? "bold" : "normal",
innerHTML: n(dt)({
content: String(a.name ?? ""),
fontSize: L.value,
fill: e.value.style.chart.layout.segmentNames.useSerieColor ? a.color : e.value.style.chart.layout.segmentNames.color,
x: a.center.endX,
y: a.center.endY
})
}, null, 8, Bt))), 256)) : c("", !0),
e.value.style.chart.layout.track.useGradient ? (r(!0), o(k, { key: 6 }, x(Ue.value, (a, s) => (r(), o("path", {
key: `arc_${s}`,
d: a.arcSlice,
fill: "#FFFFFF",
stroke: "none",
"stroke-linecap": "round",
filter: `url(#blur_${w.value})`
}, null, 8, Ut))), 128)) : c("", !0),
e.value.style.chart.layout.segmentSeparators.show ? (r(), o(k, { key: 7 }, [
p("line", E(Se.value, {
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.layout.segmentSeparators.strokeWidth + 2,
"stroke-linecap": "round"
}), null, 16, Wt),
p("line", E(Se.value, {
stroke: e.value.style.chart.layout.segmentSeparators.stroke,
"stroke-width": e.value.style.chart.layout.segmentSeparators.strokeWidth,
"stroke-linecap": "round"
}), null, 16, Dt),
(r(!0), o(k, null, x(xe.value, (a) => (r(), o("line", E({ ref_for: !0 }, a, {
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.layout.segmentSeparators.strokeWidth + 2,
"stroke-linecap": "round"
}), null, 16, Vt))), 256)),
(r(!0), o(k, null, x(xe.value, (a) => (r(), o("line", E({ ref_for: !0 }, a, {
stroke: e.value.style.chart.layout.segmentSeparators.stroke,
"stroke-width": e.value.style.chart.layout.segmentSeparators.strokeWidth,
"stroke-linecap": "round"
}), null, 16, Ht))), 256))
], 64)) : c("", !0),
e.value.style.chart.layout.markers.show ? (r(), o("g", qt, [
(r(!0), o(k, null, x(d.value, (a, s) => (r(), o("text", {
x: n(A)({
centerX: i.value.x1,
centerY: v.value.base,
initX: a.center.startX,
initY: a.center.startY,
offset: l.value.markerOffset
}).x,
y: n(A)({
centerX: i.value.x1,
centerY: v.value.base,
initX: a.center.startX,
initY: a.center.startY,
offset: l.value.markerOffset
}).y,
"text-anchor": a.center.startX < i.value.x1 - 5 ? "end" : a.center.startX > i.value.x1 + 5 ? "start" : "middle",
"font-size": l.value.labelFontSize * e.value.style.chart.layout.markers.fontSizeRatio,
"font-weight": `${e.value.style.chart.layout.markers.bold ? "bold" : "normal"}`,
fill: e.value.style.chart.layout.markers.color
}, R(n(se)(
e.value.style.chart.layout.markers.formatter,
a.from,
n(re)({
p: e.value.style.chart.layout.markers.prefix,
v: a.from,
s: e.value.style.chart.layout.markers.suffix,
r: e.value.style.chart.layout.markers.roundingValue
})
)), 9, Zt))), 256))
])) : c("", !0),
e.value.style.chart.layout.markers.show ? (r(), o("text", {
key: 9,
x: n(A)({
centerX: l.value.width / 2,
centerY: v.value.base,
initX: d.value.at(-1).endX,
initY: d.value.at(-1).endY,
offset: l.value.markerOffset
}).x,
y: n(A)({
centerX: l.value.width / 2,
centerY: v.value.base,
initX: d.value.at(-1).endX,
initY: d.value.at(-1).endY,
offset: l.value.markerOffset
}).y,
"text-anchor": "start",
"font-size": l.value.labelFontSize * e.value.style.chart.layout.markers.fontSizeRatio,
"font-weight": `${e.value.style.chart.layout.markers.bold ? "bold" : "normal"}`,
fill: e.value.style.chart.layout.markers.color
}, R(n(se)(
e.value.style.chart.layout.markers.formatter,
P.value,
n(re)({
p: e.value.style.chart.layout.markers.prefix,
v: P.value,
s: e.value.style.chart.layout.markers.suffix,
r: e.value.style.chart.layout.markers.roundingValue
})
)), 9, Jt)) : c("", !0),
e.value.style.chart.layout.pointer.show ? (r(), o(k, { key: 10 }, [
e.value.style.chart.layout.pointer.type === "rounded" ? (r(), o("g", Kt, [
isNaN(i.value.x2) ? c("", !0) : (r(), o("line", {
key: 0,
x1: i.value.x1,
y1: i.value.y1,
x2: i.value.x2,
y2: i.value.y2,
stroke: e.value.style.chart.layout.pointer.stroke,
"stroke-width": l.value.pointerStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Qt)),
isNaN(i.value.x2) ? c("", !0) : (r(), o("line", {
key: 1,
x1: i.value.x1,
y1: i.value.y1,
x2: i.value.x2,
y2: i.value.y2,
stroke: e.value.style.chart.layout.pointer.useRatingColor ? Z.value : e.value.style.chart.layout.pointer.color,
"stroke-linecap": "round",
"stroke-width": l.value.pointerStrokeWidth * 0.7
}, null, 8, ea)),
!isNaN(i.value.x2) && e.value.style.chart.layout.track.useGradient ? (r(), o("line", {
key: 2,
x1: i.value.x1,
y1: i.value.y1,
x2: i.value.x2,
y2: i.value.y2,
stroke: "white",
"stroke-linecap": "round",
"stroke-width": l.value.pointerStrokeWidth * 0.3,
filter: `url(#blur_${w.value})`
}, null, 8, ta)) : c("", !0)
])) : (r(), o("g", aa, [
be.value ? (r(), o("path", {
key: 0,
d: be.value,
fill: e.value.style.chart.layout.pointer.useRatingColor ? Z.value : e.value.style.chart.layout.pointer.color,
stroke: e.value.style.chart.layout.pointer.stroke,
"stroke-width": e.value.style.chart.layout.pointer.circle.strokeWidth,
"stroke-linejoin": "round"
}, null, 8, la)) : c("", !0)
])),
p("circle", {
cx: l.value.width / 2,
cy: v.value.base,
fill: e.value.style.chart.layout.pointer.circle.color,
r: l.value.pointerRadius <= 0 ? 1e-4 : l.value.pointerRadius,
"stroke-width": e.value.style.chart.layout.pointer.circle.strokeWidth,
stroke: e.value.style.chart.layout.pointer.circle.stroke
}, null, 8, sa)
], 64)) : c("", !0),
e.value.style.chart.legend.show ? (r(), o("text", {
key: 11,
x: l.value.width / 2,
y: v.value.ratingBase,
"text-anchor": "middle",
"font-size": l.value.legendFontSize,
"font-weight": "bold",
fill: e.value.style.chart.legend.useRatingColor ? Z.value : e.value.style.chart.legend.color
}, R(n(se)(
e.value.style.chart.legend.formatter,
y.value,
n(re)({
p: e.value.style.chart.legend.prefix + (e.value.style.chart.legend.showPlusSymbol && y.value > 0 ? "+" : ""),
v: y.value,
s: e.value.style.chart.legend.suffix,
r: e.value.style.chart.legend.roundingValue
})
)), 9, ra)) : c("", !0),
S(t.$slots, "svg", { svg: l.value }, void 0, !0)
], 14, At)),
t.$slots.watermark ? (r(), o("div", oa, [
S(t.$slots, "watermark", B(U({ isPrinting: n(me) || n(ge) })), void 0, !0)
])) : c("", !0),
p("div", {
ref_key: "chartLegend",
ref: ie
}, [
S(t.$slots, "legend", { legend: O.value }, void 0, !0)
], 512),
t.$slots.source ? (r(), o("div", {
key: 5,
ref_key: "source",
ref: ce,
dir: "auto"
}, [
S(t.$slots, "source", {}, void 0, !0)
], 512)) : c("", !0),
n(de) ? (r(), j(St, { key: 6 })) : c("", !0)
], 46, zt));
}
}, ba = /* @__PURE__ */ $t(ua, [["__scopeId", "data-v-a47ee74f"]]);
export {
ba as default
};