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