vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
691 lines (690 loc) • 33.9 kB
JavaScript
import { useCssVars as Tt, computed as g, defineAsyncComponent as fe, ref as $, toRefs as Wt, watch as je, shallowRef as Ue, onMounted as Bt, onBeforeUnmount as Et, createElementBlock as n, openBlock as s, unref as c, normalizeStyle as ge, normalizeClass as P, createBlock as ne, createCommentVNode as z, withCtx as I, renderSlot as w, normalizeProps as R, guardReactiveProps as F, createSlots as Nt, createVNode as Xt, Fragment as _, renderList as T, createElementVNode as jt, toDisplayString as Ut } from "vue";
import { c as Lt, t as Ht, o as Yt, g as Gt, h as K, a3 as Vt, X as qt, q as Le, a as Zt, U as He, d as Jt } from "./lib-BwysEpWI.js";
import { t as Kt, u as Qt } from "./useResponsive-DfdjqQps.js";
import { u as ea, a as pe } from "./useNestedProp-OFRiX4kU.js";
import { u as ta, B as aa } from "./BaseScanner-BMpwQAfz.js";
import { u as la } from "./usePrinter-BJzHDpYF.js";
import { u as oa } from "./useSvgExport-ByUukOZt.js";
import { u as sa } from "./useThemeCheck-DGJ31Vi5.js";
import { u as na } from "./useUserOptionState-BIvW1Kz7.js";
import { u as ra } from "./useChartAccessibility-9icAAmYg.js";
import ia from "./img-DKigoPDs.js";
import ua from "./Title-DGnfNZuO.js";
import { _ as ca } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { wheel: { ticks: { inactiveColor: "#4A4A4A" } }, innerCircle: { stroke: "#3A3A3A" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, Ge = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { wheel: { ticks: { inactiveColor: "#5D403760", activeColor: "#D32F2F", gradient: { shiftHueIntensity: 0 } } }, innerCircle: { stroke: "#5D403760" } }, title: { color: "#424242", subtitle: { color: "#757575" } } } } }, Ve = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { wheel: { ticks: { inactiveColor: "#5D403780", activeColor: "#D32F2F", gradient: { shiftHueIntensity: 0 } } }, innerCircle: { stroke: "#5D403760" } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } } }, qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { wheel: { ticks: { rounded: !1, inactiveColor: "#333333", activeColor: "#66CC66", gradient: { shiftHueIntensity: 15 } } }, innerCircle: { show: !1 } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } } }, Ze = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { wheel: { ticks: { inactiveColor: "#F7EDE2", activeColor: "#B1A7AD", gradient: { shiftHueIntensity: 100 } } }, innerCircle: { show: !1 } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } } }, Je = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { wheel: { ticks: { rounded: !1, inactiveColor: "#BBCBC7", activeColor: "#6C94A0", gradient: { shiftHueIntensity: 10 } } }, innerCircle: { stroke: "#BBCBC7" } }, title: { color: "#50606C", subtitle: { color: "#718890" } } } } }, Ke = {
default: {},
dark: Ye,
celebration: Ge,
celebrationNight: Ve,
hack: qe,
zen: Ze,
concrete: Je
}, Ya = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Ge,
celebrationNight: Ve,
concrete: Je,
dark: Ye,
default: Ke,
hack: qe,
zen: Ze
}, Symbol.toStringTag, { value: "Module" })), ha = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "width", "height"], ya = ["d", "stroke", "stroke-width"], ka = ["cx", "cy", "r", "stroke", "stroke-width"], fa = { key: 0 }, ga = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], pa = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], ma = { key: 1 }, wa = ["d", "fill", "stroke", "stroke-width"], Ca = ["d", "fill", "stroke", "stroke-width"], ba = ["d", "fill", "stroke", "stroke-width"], xa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], Ma = ["d", "fill", "stroke", "stroke-width"], Aa = { key: 5 }, $a = ["x", "y", "height"], Sa = ["x", "y", "font-size", "fill", "font-weight", "stroke", "stroke-width"], Ia = {
key: 4,
class: "vue-data-ui-watermark"
}, _a = {
__name: "vue-ui-wheel",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
setup(Qe, { expose: et }) {
Tt((a) => ({
v5a57364b: ft.value,
v04e37e71: gt.value,
v04e36104: pt.value
}));
const tt = fe(() => import("./PenAndPaper-DxIUvoQ8.js")), at = fe(() => import("./UserOptions-CzJWRC4s.js")), lt = fe(() => import("./PackageVersion-BLzm8l_I.js")), { vue_ui_wheel: ot } = ea(), { isThemeValid: st, warnInvalidTheme: nt } = sa(), W = Qe, rt = g(() => !!W.dataset && Object.keys(W.dataset).length), re = $(Lt()), it = $(null), me = $(0), X = $(null), we = $(null), Ce = $(null), be = $(null), xe = $(0), e = $(he()), { loading: Me, FINAL_DATASET: ie } = ta({
...Wt(W),
FINAL_CONFIG: e,
prepareConfig: he,
skeletonDataset: { percentage: 50 },
skeletonConfig: Ht({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
animation: { use: !1 },
layout: {
wheel: {
ticks: {
activeColor: "#6A6A6A80",
inactiveColor: "#CACACA80"
}
},
innerCircle: {
stroke: "#CACACA80"
}
}
}
}
}
})
}), { userOptionsVisible: ue, setUserOptionsVisibility: Ae, keepUserOptionState: $e } = na({ config: e.value }), { svgRef: ce } = ra({ config: e.value.style.chart.title });
function he() {
const a = pe({
userConfig: W.config,
defaultConfig: ot
}), o = a.theme;
if (!o) return a;
if (!st.value(a))
return nt(a), a;
const t = pe({
userConfig: Ke[o] || W.config,
defaultConfig: a
});
return pe({
userConfig: W.config,
defaultConfig: t
});
}
je(() => W.config, (a) => {
e.value = he(), ue.value = !e.value.userOptions.showOnChartHover, Oe(), xe.value += 1;
}, { deep: !0 });
const { isPrinting: Se, isImaging: Ie, generatePdf: _e, generateImage: De } = la({
elementId: re.value,
fileName: e.value.style.chart.title.text || "vue-ui-wheel",
options: e.value.userOptions.print
}), ut = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), r = $({
size: 360,
height: 360,
width: 360
}), Y = $(e.value.style.chart.layout.percentage.fontSize), u = g(() => ({
radius: Math.min(r.value.width, r.value.height) * 0.9 / 2 * e.value.style.chart.layout.wheel.radiusRatio,
centerX: r.value.width / 2,
centerY: r.value.height / 2
}));
function ze(a, o = 1) {
return {
x: u.value.centerX + u.value.radius * Math.cos(29.85 + a * Math.PI / 180) * o,
y: u.value.centerY + u.value.radius * Math.sin(29.85 + a * Math.PI / 180) * o
};
}
const d = $(e.value.style.chart.animation.use ? 0 : ie.value.percentage || 0);
je(() => ie.value, (a) => {
e.value.style.chart.animation.use ? We(a.percentage) : d.value = a.percentage || 0;
}, { deep: !0 });
const B = Ue(null), U = Ue(null);
Bt(() => {
Oe();
});
const ct = g(() => !!e.value.debug);
function Oe() {
if (Yt(W.dataset) && Gt({
componentName: "VueUiWheel",
type: "dataset",
debug: ct.value
}), e.value.responsive) {
const a = Kt(() => {
const { width: o, height: t } = Qt({
chart: X.value,
title: e.value.style.chart.title.text ? we.value : null,
source: Ce.value,
noTitle: be.value
});
requestAnimationFrame(() => {
r.value.width = o, r.value.height = t, Y.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(o, t);
});
});
B.value && (U.value && B.value.unobserve(U.value), B.value.disconnect()), B.value = new ResizeObserver(a), U.value = X.value.parentNode, B.value.observe(U.value);
}
We(ie.value.percentage || 0);
}
Et(() => {
B.value && (U.value && B.value.unobserve(U.value), B.value.disconnect());
});
function Q([a, o, t], l) {
const i = Math.cos(l), v = Math.sin(l);
return [a, o * i - t * v, o * v + t * i];
}
function ee([a, o, t], l) {
const i = l / (l - t);
return [a * i, o * i, t, i];
}
function Pe(a, o) {
const t = a.replace("#", ""), l = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16), v = parseInt(t.substring(4, 6), 16), y = 1 - Math.min(1, Math.max(0, e.value.style.chart.layout.wheel.ticks.shadeColorRatio3d)) * o, k = Math.max(0, Math.min(255, Math.round(l * y))), x = Math.max(0, Math.min(255, Math.round(i * y))), M = Math.max(0, Math.min(255, Math.round(v * y)));
return `#${k.toString(16).padStart(2, "0")}${x.toString(16).padStart(2, "0")}${M.toString(16).padStart(2, "0")}`;
}
function ht({
cx: a,
cy: o,
radius: t,
innerRatio: l = 0.8,
count: i = 120,
startDeg: v = 0,
axDeg: C = 50,
f: y = 520,
baseStroke: k = 5,
activeColor: x,
inactiveColor: M,
getActive: S
}) {
const h = C * Math.PI / 180, p = t, A = t * l, b = [];
for (let m = 0; m < i; m += 1) {
const f = (m / i * 360 + v) * Math.PI / 180, O = a + p * Math.cos(f), H = o + p * Math.sin(f), j = a + A * Math.cos(f), G = o + A * Math.sin(f), V = [O - a, H - o, 0], q = [j - a, G - o, 0], [oe, Xe, Z] = Q(V, h), [ye, ke, J] = Q(q, h), [se, xt, , Mt] = ee([oe, Xe, Z], y), [At, $t, , za] = ee([ye, ke, J], y), St = a + se, It = o + xt, _t = a + At, Dt = o + $t, zt = (Math.max(Z, J) - -p * Math.sin(h)) / (2 * p * Math.sin(h) || 1), Ot = S ? S(m) : !0, Pt = e.value.style.chart.layout.wheel.ticks.gradient.show ? K(x, m * D.value / N.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : x, Rt = Pe(Ot ? Pt : M, zt), Ft = Math.max(1.25, k * Mt * (Math.min(r.value.width, r.value.height) / 360));
b.push({ i: m, x1: St, y1: It, x2: _t, y2: Dt, stroke: Ft, color: Rt, z: Math.max(Z, J) });
}
return b.sort((m, f) => m.z - f.z), b;
}
const Re = g(() => {
if (!e.value.layout === "3d") return null;
const a = N.value, o = e.value.style.chart.layout.wheel.ticks.gradient.show ? K(e.value.style.chart.layout.wheel.ticks.activeColor, 0) : e.value.style.chart.layout.wheel.ticks.activeColor, t = e.value.style.chart.layout.wheel.ticks.inactiveColor, l = e.value.style.chart.layout.wheel.ticks.strokeWidth;
return ht({
cx: u.value.centerX,
cy: u.value.centerY,
radius: u.value.radius,
innerRatio: e.value.style.chart.layout.wheel.ticks.sizeRatio,
count: a,
startDeg: -90,
axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
f: Math.min(r.value.width, r.value.height) * 1.45,
baseStroke: l,
activeColor: o,
inactiveColor: t,
getActive: (i) => d.value > i * D.value
});
});
function Fe({ cx: a, cy: o, r: t, count: l = 180, startDeg: i = -90, axDeg: v = 50, f: C }) {
const y = v * Math.PI / 180, k = [];
let x = 0;
for (let h = 0; h < l; h += 1) {
const p = (h / l * 360 + i) * Math.PI / 180, A = [t * Math.cos(p), t * Math.sin(p), 0], [b, m, f] = Q(A, y), [O, H, , j] = ee([b, m, f], C);
x += j, k.push([a + O, o + H]);
}
let M = `M ${k[0][0]} ${k[0][1]}`;
for (let h = 1; h < k.length; h += 1)
M += ` L ${k[h][0]} ${k[h][1]}`;
M += " Z";
const S = x / l;
return { d: M, avgScale: S, pts: k };
}
const E = g(() => {
if (e.value.layout !== "3d") return null;
const a = Math.min(r.value.width, r.value.height) * 1.45, o = e.value.style.chart.layout.wheel.tiltAngle3d, t = u.value.radius, { pts: l, avgScale: i } = (() => {
const A = t, b = o, { avgScale: m, pts: f } = Fe({
cx: u.value.centerX,
cy: u.value.centerY,
r: A,
startDeg: -90,
axDeg: b,
f: a
});
return { pts: f, avgScale: m };
})();
let v = 1 / 0, C = 1 / 0, y = -1 / 0, k = -1 / 0;
for (const [A, b] of l)
A < v && (v = A), b < C && (C = b), A > y && (y = A), b > k && (k = b);
const x = e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(r.value.width, r.value.height), M = e.value.style.chart.layout.innerCircle.strokeWidth || 0, S = 0.5 * Math.max(x, M * (i || 1)), h = Math.max(0, Number(e.value.style.chart.layout.wheel.ticks.depth3d) || 0), p = S;
return {
x: v - p,
y: C - h - p,
w: y - v + 2 * p,
h: k - (C - h) + 2 * p
};
});
function vt(a) {
const o = Math.min(r.value.width, r.value.height) * 1.45, { d: t, avgScale: l } = Fe({
cx: u.value.centerX,
cy: u.value.centerY,
r: a,
startDeg: -90,
axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
f: o
}), v = (e.value.style.chart.layout.innerCircle.strokeWidth || 1) * l;
return {
d: t,
stroke: e.value.style.chart.layout.innerCircle.stroke,
strokeWidth: v
};
}
const Te = g(() => vt(Math.max(0, u.value.radius * 0.8 * e.value.style.chart.layout.innerCircle.radiusRatio)));
function te({ cx: a, cy: o, r: t, aRad: l, ax: i, f: v }) {
const C = [t * Math.cos(l), t * Math.sin(l), 0], [y, k, x] = Q(C, i), [M, S, , h] = ee([y, k, x], v);
return { x: a + M, y: o + S, z: x, s: h };
}
function dt({
cx: a,
cy: o,
radius: t,
innerRatio: l = 0.8,
count: i = 120,
startDeg: v = -87,
axDeg: C = 45,
f: y = 600,
activeColor: k,
inactiveColor: x,
getActive: M,
Y: S = 0
}) {
const h = C * Math.PI / 180, p = t, A = t * l, b = 2 * Math.PI / i, m = [];
for (let f = 0; f < i; f += 1) {
const O = v * Math.PI / 180 + b * f, H = O + b * Math.min(1, e.value.style.chart.layout.wheel.ticks.spacingRatio3d), j = te({ cx: a, cy: o + S, r: p, aRad: O, ax: h, f: y }), G = te({ cx: a, cy: o + S, r: p, aRad: H, ax: h, f: y }), V = te({ cx: a, cy: o + S, r: A, aRad: H, ax: h, f: y }), q = te({ cx: a, cy: o + S, r: A, aRad: O, ax: h, f: y }), oe = (j.z + G.z + q.z + V.z) / 4, Z = (M ? M(f) : !0) ? e.value.style.chart.layout.wheel.ticks.gradient.show ? K(
e.value.style.chart.layout.wheel.ticks.activeColor,
f * (100 / i) / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)
) : k : x, ye = (() => {
const se = p * Math.sin(h) || 1;
return (oe - -se) / (2 * se);
})(), ke = Pe(Z, ye), J = `M ${j.x} ${j.y} L ${G.x} ${G.y} L ${V.x} ${V.y} L ${q.x} ${q.y} Z`;
m.push({ i: f, d: J, fill: ke, z: oe });
}
return m.sort((f, O) => f.z - O.z), m;
}
const ve = g(() => {
if (e.value.layout !== "3d") return null;
const a = N.value;
return (o) => dt({
cx: u.value.centerX,
cy: u.value.centerY,
radius: u.value.radius,
innerRatio: e.value.style.chart.layout.wheel.ticks.sizeRatio,
count: a,
startDeg: -90,
axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
f: Math.min(r.value.width, r.value.height) * 1.45,
activeColor: e.value.style.chart.layout.wheel.ticks.activeColor,
inactiveColor: e.value.style.chart.layout.wheel.ticks.inactiveColor,
getActive: (t) => d.value > t * (100 / a),
Y: o
});
});
function We(a) {
let o = e.value.style.chart.animation.speed;
const t = Math.abs(a - d.value) / (o * 120);
function l() {
d.value < a ? d.value = Math.min(d.value + t, a) : d.value > a && (d.value = Math.max(d.value - t, a)), d.value !== a && requestAnimationFrame(l);
}
l();
}
const N = g(() => (e.value.debug && e.value.style.chart.layout.wheel.ticks.quantity < 12 && console.warn("VueUiWheel - The min number of ticks is 12"), e.value.debug && e.value.style.chart.layout.wheel.ticks.quantity > 200 && console.warn("VueUiWheel - The max number of ticks is 200"), Math.max(12, Math.min(e.value.style.chart.layout.wheel.ticks.quantity, 200)))), D = g(() => 100 / N.value), Be = g(() => {
const a = [];
for (let o = 0; o < N.value; o += 1) {
const t = d.value > o * D.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: l, y: i } = ze(r.value.size / N.value * o), { x: v, y: C } = ze(r.value.size / N.value * o, e.value.style.chart.layout.wheel.ticks.sizeRatio);
a.push({
x1: l,
y1: i,
x2: v,
y2: C,
color: e.value.style.chart.layout.wheel.ticks.gradient.show ? K(t, o * D.value / N.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : t
});
}
return a;
}), yt = g(() => Vt({ series: Be.value.map((a) => ({
name: "",
value: 1,
color: a.color
})) }, u.value.centerX, u.value.centerY, u.value.radius, u.value.radius, 1.99999, 2, 1, 360, 105.25, u.value.radius * (1 - e.value.style.chart.layout.wheel.ticks.sizeRatio))), ae = $(!1);
function Ee(a) {
ae.value = a, me.value += 1;
}
const le = $(!1);
function de() {
le.value = !le.value;
}
async function kt({ scale: a = 2 } = {}) {
if (!X.value) return;
const { width: o, height: t } = X.value.getBoundingClientRect(), l = o / t, { imageUri: i, base64: v } = await ia({ domElement: X.value, base64: !0, img: !0, scale: a });
return {
imageUri: i,
base64: v,
title: e.value.style.chart.title.text,
width: o,
height: t,
aspectRatio: l
};
}
const ft = g(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2), gt = g(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2 * 0.75), pt = g(() => e.value.style.chart.layout.wheel.ticks.strokeWidth), L = g(() => Math.max(1, Math.min(20, e.value.style.chart.layout.wheel.ticks.depth3d))), mt = g(() => e.value.style.chart.backgroundColor), wt = g(() => e.value.style.chart.title), { exportSvg: Ct, getSvg: bt } = oa({
svg: ce,
title: wt,
backgroundColor: mt,
stretchTitle: !0
});
async function Ne({ isCb: a }) {
if (a) {
const { blob: o, url: t, text: l, dataUrl: i } = await bt();
e.value.userOptions.callbacks.svg({ blob: o, url: t, text: l, dataUrl: i });
} else
Ct();
}
return et({
getImage: kt,
generatePdf: _e,
generateImage: De,
generateSvg: Ne,
toggleAnnotator: de,
toggleFullscreen: Ee
}), (a, o) => (s(), n("div", {
class: P(["vue-ui-wheel", { "vue-data-ui-component": !0, "vue-ui-wheel-3d-wrap": e.value.layout === "3d" }]),
ref_key: "wheelChart",
ref: X,
id: re.value,
style: ge(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
onMouseenter: o[0] || (o[0] = () => c(Ae)(!0)),
onMouseleave: o[1] || (o[1] = () => c(Ae)(!1))
}, [
e.value.userOptions.buttons.annotator ? (s(), ne(c(tt), {
key: 0,
svgRef: c(ce),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: le.value,
onClose: de
}, {
"annotator-action-close": I(() => [
w(a.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": I(({ color: t }) => [
w(a.$slots, "annotator-action-color", R(F({ color: t })), void 0, !0)
]),
"annotator-action-draw": I(({ mode: t }) => [
w(a.$slots, "annotator-action-draw", R(F({ mode: t })), void 0, !0)
]),
"annotator-action-undo": I(({ disabled: t }) => [
w(a.$slots, "annotator-action-undo", R(F({ disabled: t })), void 0, !0)
]),
"annotator-action-redo": I(({ disabled: t }) => [
w(a.$slots, "annotator-action-redo", R(F({ disabled: t })), void 0, !0)
]),
"annotator-action-delete": I(({ disabled: t }) => [
w(a.$slots, "annotator-action-delete", R(F({ disabled: t })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : z("", !0),
ut.value ? (s(), n("div", {
key: 1,
ref_key: "noTitle",
ref: be,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : z("", !0),
e.value.style.chart.title.text ? (s(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: we,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(s(), ne(ua, {
key: `title_${xe.value}`,
config: {
title: {
cy: "wheel-title",
...e.value.style.chart.title
},
subtitle: {
cy: "wheel-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : z("", !0),
e.value.userOptions.show && rt.value && (c($e) || c(ue)) ? (s(), ne(c(at), {
ref_key: "details",
ref: it,
key: `user_options_${me.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: c(Se),
isImaging: c(Ie),
uid: re.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
hasXls: !1,
isFullscreen: ae.value,
position: e.value.userOptions.position,
titles: { ...e.value.userOptions.buttonTitles },
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: le.value,
chartElement: X.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: Ee,
onGeneratePdf: c(_e),
onGenerateImage: c(De),
onGenerateSvg: Ne,
onToggleAnnotator: de,
style: ge({
visibility: c($e) ? c(ue) ? "visible" : "hidden" : "visible"
})
}, Nt({ _: 2 }, [
a.$slots.menuIcon ? {
name: "menuIcon",
fn: I(({ isOpen: t, color: l }) => [
w(a.$slots, "menuIcon", R(F({ isOpen: t, color: l })), void 0, !0)
]),
key: "0"
} : void 0,
a.$slots.optionPdf ? {
name: "optionPdf",
fn: I(() => [
w(a.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
a.$slots.optionImg ? {
name: "optionImg",
fn: I(() => [
w(a.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
a.$slots.optionSvg ? {
name: "optionSvg",
fn: I(() => [
w(a.$slots, "optionSvg", {}, void 0, !0)
]),
key: "3"
} : void 0,
a.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: I(({ toggleFullscreen: t, isFullscreen: l }) => [
w(a.$slots, "optionFullscreen", R(F({ toggleFullscreen: t, isFullscreen: l })), void 0, !0)
]),
key: "4"
} : void 0,
a.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: I(({ toggleAnnotator: t, isAnnotator: l }) => [
w(a.$slots, "optionAnnotator", R(F({ toggleAnnotator: t, isAnnotator: l })), void 0, !0)
]),
key: "5"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "position", "titles", "hasAnnotator", "isAnnotation", "chartElement", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : z("", !0),
(s(), n("svg", {
ref_key: "svgRef",
ref: ce,
xmlns: c(qt),
class: P({ "vue-data-ui-fullscreen--on": ae.value, "vue-data-ui-fulscreen--off": !ae.value, "vue-ui-wheel-3d-svg": e.value.layout === "3d" }),
viewBox: e.value.layout === "3d" && !e.value.responsive ? `${E.value?.x - 10} ${E.value?.y ?? 0} ${E.value?.w + 20} ${E.value?.h ?? Math.max(10, r.value.height)}` : `0 0 ${Math.max(10, r.value.width)} ${Math.max(10, r.value.height)}`,
style: ge(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
Xt(c(lt)),
a.$slots["chart-background"] ? (s(), n("foreignObject", {
key: 0,
x: e.value.layout === "3d" && !e.value.responsive ? E.value?.x - 10 : 0,
y: e.value.layout === "3d" && !e.value.responsive ? E.value?.y ?? 0 : 0,
width: e.value.layout === "3d" && !e.value.responsive ? E.value?.w + 20 : Math.max(10, r.value.width),
height: e.value.layout === "3d" && !e.value.responsive ? E.value?.h ?? Math.max(10, r.value.height) : Math.max(10, r.value.height),
style: {
pointerEvents: "none"
}
}, [
w(a.$slots, "chart-background", {}, void 0, !0)
], 8, da)) : z("", !0),
e.value.layout === "3d" && Te.value ? (s(), n("path", {
key: 1,
class: "vue-ui-wheel-inner-circle",
d: Te.value.d,
stroke: e.value.style.chart.layout.innerCircle.stroke,
"stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
fill: "none"
}, null, 8, ya)) : e.value.style.chart.layout.innerCircle.show ? (s(), n("circle", {
key: 2,
class: "vue-ui-wheel-inner-circle",
cx: u.value.centerX,
cy: u.value.centerY,
r: Math.max(0, u.value.radius * e.value.style.chart.layout.innerCircle.radiusRatio * 0.8),
stroke: e.value.style.chart.layout.innerCircle.stroke,
"stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
fill: "none"
}, null, 8, ka)) : z("", !0),
e.value.layout === "3d" ? (s(), n(_, { key: 3 }, [
e.value.style.chart.layout.wheel.ticks.type === "classic" ? (s(), n("g", fa, [
(s(!0), n(_, null, T(L.value, (t) => (s(), n("g", null, [
(s(!0), n(_, null, T(Re.value || [], (l) => (s(), n("line", {
key: l.i,
x1: l.x1,
y1: l.y1 - t,
x2: l.x2,
y2: l.y2 - t,
stroke: c(Le)(l.color, 0.25 * t / 5),
"stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(r.value.width, r.value.height),
"stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l.i * D.value <= d.value })
}, null, 10, ga))), 128))
]))), 256)),
(s(!0), n(_, null, T(Re.value || [], (t) => (s(), n("line", {
key: t.i,
x1: t.x1,
y1: t.y1 - L.value,
x2: t.x2,
y2: t.y2 - L.value,
stroke: t.color,
"stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(r.value.width, r.value.height),
"stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && t.i * D.value <= d.value })
}, null, 10, pa))), 128))
])) : (s(), n("g", ma, [
(s(!0), n(_, null, T(L.value, (t) => (s(), n("g", null, [
(s(!0), n(_, null, T(ve.value(-t) || [], (l) => (s(), n("path", {
key: l.i,
d: l.d,
fill: e.value.style.chart.layout.wheel.ticks.inactiveColor,
stroke: e.value.style.chart.layout.wheel.ticks.stroke,
"stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: "vue-ui-wheel-tick"
}, null, 8, wa))), 128)),
(s(!0), n(_, null, T(ve.value(-t) || [], (l) => (s(), n("path", {
key: l.i,
d: l.d,
fill: c(Le)(l.fill, 0.5 * t / L.value),
stroke: e.value.style.chart.layout.wheel.ticks.stroke,
"stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && l.i * D.value <= d.value })
}, null, 10, Ca))), 128))
]))), 256)),
jt("g", null, [
(s(!0), n(_, null, T(ve.value(-L.value) || [], (t) => (s(), n("path", {
key: t.i,
d: t.d,
fill: t.fill,
stroke: e.value.style.chart.layout.wheel.ticks.stroke,
"stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && t.i * D.value <= d.value })
}, null, 10, ba))), 128))
])
]))
], 64)) : (s(), n(_, { key: 4 }, [
e.value.style.chart.layout.wheel.ticks.type === "classic" ? (s(!0), n(_, { key: 0 }, T(Be.value, (t, l) => (s(), n("line", {
x1: t.x1,
x2: t.x2,
y1: t.y1,
y2: t.y2,
stroke: t.color,
"stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(r.value.width, r.value.height),
"stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * D.value <= d.value })
}, null, 10, xa))), 256)) : (s(!0), n(_, { key: 1 }, T(yt.value, (t, l) => (s(), n("path", {
d: t.arcSlice,
fill: t.color,
class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * D.value <= d.value }),
stroke: e.value.style.chart.layout.wheel.ticks.stroke,
"stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth
}, null, 10, Ma))), 256))
], 64)),
e.value.style.chart.layout.percentage.show ? (s(), n("g", Aa, [
c(Me) ? (s(), n("rect", {
key: 0,
x: u.value.centerX - 40,
y: u.value.centerY - Y.value / 2,
width: 80,
height: Y.value,
fill: "#6A6A6A80",
rx: "3"
}, null, 8, $a)) : (s(), n("text", {
key: 1,
x: u.value.centerX + e.value.style.chart.layout.percentage.offsetX,
y: u.value.centerY + Y.value / 3 + e.value.style.chart.layout.percentage.offsetY,
"font-size": Y.value,
fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? c(K)(e.value.style.chart.layout.wheel.ticks.activeColor, d.value / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.wheel.ticks.activeColor,
"text-anchor": "middle",
"font-weight": e.value.style.chart.layout.percentage.bold ? "bold" : "normal",
style: { "font-variant-numeric": "tabluar-nums" },
stroke: e.value.style.chart.layout.percentage.stroke,
"stroke-width": e.value.style.chart.layout.percentage.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
"paint-order": "stroke fill",
class: P({ "vue-ui-wheel-label": e.value.layout === "3d" })
}, Ut(c(Zt)(
e.value.style.chart.layout.percentage.formatter,
c(He)(d.value),
c(Jt)({
v: c(He)(d.value),
s: "%",
r: e.value.style.chart.layout.percentage.rounding
})
)), 11, Sa))
])) : z("", !0),
w(a.$slots, "svg", { svg: r.value }, void 0, !0)
], 14, va)),
a.$slots.watermark ? (s(), n("div", Ia, [
w(a.$slots, "watermark", R(F({ isPrinting: c(Se) || c(Ie) })), void 0, !0)
])) : z("", !0),
a.$slots.source ? (s(), n("div", {
key: 5,
ref_key: "source",
ref: Ce,
dir: "auto"
}, [
w(a.$slots, "source", {}, void 0, !0)
], 512)) : z("", !0),
c(Me) ? (s(), ne(aa, { key: 6 })) : z("", !0)
], 46, ha));
}
}, Da = /* @__PURE__ */ ca(_a, [["__scopeId", "data-v-a1178806"]]), Ga = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Da
}, Symbol.toStringTag, { value: "Module" }));
export {
Ya as a,
Ga as b,
Da as v
};