vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
353 lines (352 loc) • 14.9 kB
JavaScript
import { defineAsyncComponent as $, computed as p, ref as c, watch as te, shallowRef as ae, onMounted as we, onBeforeUnmount as be, createElementBlock as v, openBlock as s, unref as l, normalizeStyle as N, createBlock as I, createCommentVNode as h, createSlots as Ce, withCtx as w, renderSlot as y, normalizeProps as _, guardReactiveProps as x, normalizeClass as R, createVNode as Oe, Fragment as le, renderList as ne, toDisplayString as $e } from "vue";
import { u as Ie, c as _e, a as xe, o as Ae, e as Pe, w as oe, m as Fe, X as Se, i as ze, v as se, f as Me } from "./index-BLtEpj8j.js";
import { t as Te, u as Ne } from "./useResponsive-DfdjqQps.js";
import { u as ue } from "./useNestedProp-Bw1KcAmj.js";
import { u as Re } from "./usePrinter-DnRwTdvS.js";
import { u as Ue } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Ee } from "./useChartAccessibility-9icAAmYg.js";
import Xe from "./Title-DkG60EPg.js";
import Be from "./img-D-vWHxhM.js";
import { _ as Le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ge = ["id"], je = ["xmlns", "viewBox"], De = ["width", "height"], Ye = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], He = ["d", "fill"], We = ["cx", "cy", "r", "stroke", "stroke-width"], qe = ["x", "y", "font-size", "fill", "font-weight"], Ve = {
key: 5,
class: "vue-data-ui-watermark"
}, Je = {
__name: "vue-ui-wheel",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
setup(re, { expose: ie }) {
const ce = $(() => import("./PenAndPaper-7BWf7zgA.js")), ve = $(() => import("./vue-ui-skeleton-CsMU8DwQ.js")), he = $(() => import("./UserOptions-DGw0HvSp.js")), de = $(() => import("./PackageVersion-CnRyWKP-.js")), { vue_ui_wheel: ye } = Ie(), d = re, A = p(() => !!d.dataset && Object.keys(d.dataset).length), P = c(_e()), fe = c(null), U = c(0), g = c(null), E = c(null), X = c(null), B = c(null), L = c(0), e = p({
get: () => Y(),
set: (t) => t
}), { userOptionsVisible: F, setUserOptionsVisibility: G, keepUserOptionState: j } = Ue({ config: e.value }), { svgRef: D } = Ee({ config: e.value.style.chart.title });
function Y() {
const t = ue({
userConfig: d.config,
defaultConfig: ye
});
return t.theme ? {
...ue({
userConfig: xe.vue_ui_wheel[t.theme] || d.config,
defaultConfig: t
})
} : t;
}
te(() => d.config, (t) => {
e.value = Y(), F.value = !e.value.userOptions.showOnChartHover, K(), L.value += 1;
}, { deep: !0 });
const { isPrinting: H, isImaging: W, generatePdf: q, generateImage: V } = Re({
elementId: P.value,
fileName: e.value.style.chart.title.text || "vue-ui-wheel",
options: e.value.userOptions.print
}), pe = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), o = c({
size: 360,
height: 360,
width: 360
}), S = c(e.value.style.chart.layout.percentage.fontSize), r = p(() => ({
radius: Math.min(o.value.width, o.value.height) * 0.9 / 2,
centerX: o.value.width / 2,
centerY: o.value.height / 2
}));
function J(t, n = 1) {
return {
x: r.value.centerX + r.value.radius * Math.cos(29.85 + t * Math.PI / 180) * n,
y: r.value.centerY + r.value.radius * Math.sin(29.85 + t * Math.PI / 180) * n
};
}
const i = c(e.value.style.chart.animation.use ? 0 : d.dataset.percentage || 0);
te(() => d.dataset, (t) => {
e.value.style.chart.animation.use ? Q(t.percentage) : i.value = t.percentage || 0;
}, { deep: !0 });
const f = ae(null), m = ae(null);
we(() => {
K();
});
function K() {
if (Ae(d.dataset) && Pe({
componentName: "VueUiWheel",
type: "dataset"
}), Q(d.dataset.percentage || 0), e.value.responsive) {
const t = Te(() => {
const { width: n, height: a } = Ne({
chart: g.value,
title: e.value.style.chart.title.text ? E.value : null,
source: X.value,
noTitle: B.value
});
requestAnimationFrame(() => {
o.value.width = n, o.value.height = a, S.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(n, a);
});
});
f.value && (m.value && f.value.unobserve(m.value), f.value.disconnect()), f.value = new ResizeObserver(t), m.value = g.value.parentNode, f.value.observe(m.value);
}
}
be(() => {
f.value && (m.value && f.value.unobserve(m.value), f.value.disconnect());
});
function Q(t) {
let n = e.value.style.chart.animation.speed;
const a = Math.abs(t - i.value) / (n * 120);
function u() {
i.value < t ? i.value = Math.min(i.value + a, t) : i.value > t && (i.value = Math.max(i.value - a, t)), i.value !== t && requestAnimationFrame(u);
}
u();
}
const k = p(() => Math.max(100, e.value.style.chart.layout.wheel.ticks.quantity)), b = p(() => 100 / k.value), Z = p(() => {
const t = [];
for (let n = 0; n < k.value; n += 1) {
const a = i.value > n * b.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: u, y: M } = J(o.value.size / k.value * n), { x: T, y: ke } = J(o.value.size / k.value * n, e.value.style.chart.layout.wheel.ticks.sizeRatio);
t.push({
x1: u,
y1: M,
x2: T,
y2: ke,
color: e.value.style.chart.layout.wheel.ticks.gradient.show ? oe(a, n * b.value / k.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : a
});
}
return t;
}), ge = p(() => Fe({ series: Z.value.map((t) => ({
name: "",
value: 1,
color: t.color
})) }, r.value.centerX, r.value.centerY, r.value.radius, r.value.radius, 1.99999, 2, 1, 360, 105.25, r.value.radius * (1 - e.value.style.chart.layout.wheel.ticks.sizeRatio))), C = c(!1);
function ee(t) {
C.value = t, U.value += 1;
}
const O = c(!1);
function z() {
O.value = !O.value;
}
async function me({ scale: t = 2 } = {}) {
if (!g.value) return;
const { width: n, height: a } = g.value.getBoundingClientRect(), u = n / a, { imageUri: M, base64: T } = await Be({ domElement: g.value, base64: !0, img: !0, scale: t });
return {
imageUri: M,
base64: T,
title: e.value.style.chart.title.text,
width: n,
height: a,
aspectRatio: u
};
}
return ie({
getImage: me,
generatePdf: q,
generateImage: V,
toggleAnnotator: z,
toggleFullscreen: ee
}), (t, n) => (s(), v("div", {
class: "vue-ui-wheel",
ref_key: "wheelChart",
ref: g,
id: P.value,
style: N(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
onMouseenter: n[0] || (n[0] = () => l(G)(!0)),
onMouseleave: n[1] || (n[1] = () => l(G)(!1))
}, [
e.value.userOptions.buttons.annotator ? (s(), I(l(ce), {
key: 0,
svgRef: l(D),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: O.value,
onClose: z
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
pe.value ? (s(), v("div", {
key: 1,
ref_key: "noTitle",
ref: B,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : h("", !0),
e.value.style.chart.title.text ? (s(), v("div", {
key: 2,
ref_key: "chartTitle",
ref: E,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(s(), I(Xe, {
key: `title_${L.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)) : h("", !0),
e.value.userOptions.show && A.value && (l(j) || l(F)) ? (s(), I(l(he), {
ref_key: "details",
ref: fe,
key: `user_options_${U.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: l(H),
isImaging: l(W),
uid: P.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
hasXls: !1,
isFullscreen: C.value,
position: e.value.userOptions.position,
titles: { ...e.value.userOptions.buttonTitles },
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: O.value,
chartElement: g.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: ee,
onGeneratePdf: l(q),
onGenerateImage: l(V),
onToggleAnnotator: z,
style: N({
visibility: l(j) ? l(F) ? "visible" : "hidden" : "visible"
})
}, Ce({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: w(({ isOpen: a, color: u }) => [
y(t.$slots, "menuIcon", _(x({ isOpen: a, color: u })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: w(() => [
y(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: w(() => [
y(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: w(({ toggleFullscreen: a, isFullscreen: u }) => [
y(t.$slots, "optionFullscreen", _(x({ toggleFullscreen: a, isFullscreen: u })), void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: w(({ toggleAnnotator: a, isAnnotator: u }) => [
y(t.$slots, "optionAnnotator", _(x({ toggleAnnotator: a, isAnnotator: u })), void 0, !0)
]),
key: "4"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "position", "titles", "hasAnnotator", "isAnnotation", "chartElement", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
A.value ? (s(), v("svg", {
key: 4,
ref_key: "svgRef",
ref: D,
xmlns: l(Se),
class: R({ "vue-data-ui-fullscreen--on": C.value, "vue-data-ui-fulscreen--off": !C.value }),
viewBox: `0 0 ${o.value.width <= 0 ? 10 : o.value.width} ${o.value.height <= 0 ? 10 : o.value.height}`,
style: N(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
Oe(l(de)),
t.$slots["chart-background"] ? (s(), v("foreignObject", {
key: 0,
x: 0,
y: 0,
width: o.value.width <= 0 ? 10 : o.value.width,
height: o.value.height <= 0 ? 10 : o.value.height,
style: {
pointerEvents: "none"
}
}, [
y(t.$slots, "chart-background", {}, void 0, !0)
], 8, De)) : h("", !0),
e.value.style.chart.layout.wheel.ticks.type === "classic" ? (s(!0), v(le, { key: 1 }, ne(Z.value, (a, u) => (s(), v("line", {
x1: a.x1,
x2: a.x2,
y1: a.y1,
y2: a.y2,
stroke: a.color,
"stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(o.value.width, o.value.height),
"stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
class: R({ "vue-ui-tick-animated": e.value.style.chart.animation.use && u * b.value <= i.value })
}, null, 10, Ye))), 256)) : (s(!0), v(le, { key: 2 }, ne(ge.value, (a, u) => (s(), v("path", {
d: a.arcSlice,
fill: a.color,
class: R({ "vue-ui-tick-animated": e.value.style.chart.animation.use && u * b.value <= i.value })
}, null, 10, He))), 256)),
e.value.style.chart.layout.innerCircle.show ? (s(), v("circle", {
key: 3,
cx: r.value.centerX,
cy: r.value.centerY,
r: r.value.radius * 0.8 <= 0 ? 1e-4 : r.value.radius * 0.8,
stroke: e.value.style.chart.layout.innerCircle.stroke,
"stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
fill: "none"
}, null, 8, We)) : h("", !0),
e.value.style.chart.layout.percentage.show ? (s(), v("text", {
key: 4,
x: r.value.centerX,
y: r.value.centerY + S.value / 3,
"font-size": S.value,
fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? l(oe)(e.value.style.chart.layout.wheel.ticks.activeColor, i.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" }
}, $e(l(ze)(
e.value.style.chart.layout.percentage.formatter,
l(se)(i.value),
l(Me)({
v: l(se)(i.value),
s: "%",
r: e.value.style.chart.layout.percentage.rounding
})
)), 9, qe)) : h("", !0),
y(t.$slots, "svg", { svg: o.value }, void 0, !0)
], 14, je)) : h("", !0),
t.$slots.watermark ? (s(), v("div", Ve, [
y(t.$slots, "watermark", _(x({ isPrinting: l(H) || l(W) })), void 0, !0)
])) : h("", !0),
t.$slots.source ? (s(), v("div", {
key: 6,
ref_key: "source",
ref: X,
dir: "auto"
}, [
y(t.$slots, "source", {}, void 0, !0)
], 512)) : h("", !0),
A.value ? h("", !0) : (s(), I(l(ve), {
key: 7,
config: {
type: "wheel",
style: {
backgroundColor: e.value.style.chart.backgroundColor,
wheel: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"]))
], 44, Ge));
}
}, ut = /* @__PURE__ */ Le(Je, [["__scopeId", "data-v-e7d09662"]]);
export {
ut as default
};