vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
478 lines (477 loc) • 21.4 kB
JavaScript
import { defineAsyncComponent as G, computed as d, ref as h, toRefs as He, watch as ve, onMounted as Re, createElementBlock as i, openBlock as r, unref as n, normalizeStyle as X, normalizeClass as V, createBlock as N, createCommentVNode as k, withCtx as f, renderSlot as u, normalizeProps as b, guardReactiveProps as C, createSlots as Ue, createVNode as je, Fragment as he, renderList as de, toDisplayString as Le } from "vue";
import { c as Ge, t as Xe, U as Ve, o as Ye, g as qe, h as fe, X as We, a as Je, d as Ke } from "./lib-2iaAPQ_c.js";
import { t as Qe, u as Ze } from "./useResponsive-DfdjqQps.js";
import { u as et, a as Y } from "./useNestedProp-2p4Tjzc8.js";
import { u as tt, B as at } from "./BaseScanner-BMpwQAfz.js";
import { u as ot } from "./usePrinter-ChVMpU2f.js";
import { u as lt } from "./useSvgExport-ByUukOZt.js";
import { u as nt } from "./useThemeCheck-DGJ31Vi5.js";
import { u as st } from "./useUserOptionState-BIvW1Kz7.js";
import { u as rt } from "./useChartAccessibility-9icAAmYg.js";
import it from "./Title-DSOZzIrU.js";
import ut from "./img-CqYIrJ8I.js";
import { _ as ct } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { inactiveColor: "#4A4A4A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, ye = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { crescendo: !1, inactiveColor: "#5D403760", activeColor: "#D32F2F", ticks: { gradient: { shiftHueIntensity: 0 } } }, title: { color: "#424242", subtitle: { color: "#757575" } } } } }, pe = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { crescendo: !1, inactiveColor: "#5D403760", activeColor: "#D32F2F", ticks: { gradient: { shiftHueIntensity: 0 } } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } } }, me = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { crescendo: !1, inactiveColor: "#333333", activeColor: "#66CC66", ticks: { gradient: { shiftHueIntensity: 15 } } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } } }, ke = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { crescendo: !0, curved: !0, curveAngleX: 5, curveAngleY: 5, inactiveColor: "#F7EDE2", activeColor: "#B1A7AD", ticks: { gradient: { shiftHueIntensity: 15 } } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } } }, be = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { crescendo: !1, inactiveColor: "#BBCBC7", activeColor: "#6C94A0", ticks: { gradient: { shiftHueIntensity: 10 } } }, title: { color: "#50606C", subtitle: { color: "#718890" } } } } }, Ce = {
default: {},
dark: ge,
celebration: ye,
celebrationNight: pe,
hack: me,
zen: ke,
concrete: be
}, Nt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: ye,
celebrationNight: pe,
concrete: be,
dark: ge,
default: Ce,
hack: me,
zen: ke
}, Symbol.toStringTag, { value: "Module" })), vt = ["id"], ht = ["xmlns", "viewBox"], dt = ["width", "height"], ft = { key: 1 }, gt = ["d", "stroke-width", "stroke"], yt = { key: 2 }, pt = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], mt = { key: 3 }, kt = ["x", "y", "height"], bt = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], Ct = {
key: 4,
class: "vue-data-ui-watermark"
}, At = {
__name: "vue-ui-tiremarks",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
setup(Ae, { expose: we }) {
const $e = G(() => import("./PenAndPaper-CvyKWfNl.js")), _e = G(() => import("./UserOptions-BQO4YFrn.js")), Oe = G(() => import("./PackageVersion-Br3DrrFh.js")), { vue_ui_tiremarks: Se } = et(), { isThemeValid: xe, warnInvalidTheme: Ie } = nt(), A = Ae, Pe = d(() => !!A.dataset && Object.keys(A.dataset).length), M = h(Ge()), O = h(null), Fe = h(null), q = h(null), W = h(null), J = h(0), K = h(0), S = h(null), P = h(null), e = h(j()), { loading: Q, FINAL_DATASET: H } = tt({
...He(A),
FINAL_CONFIG: e,
prepareConfig: j,
skeletonDataset: { percentage: 50 },
skeletonConfig: Xe({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
animation: { use: !1 },
layout: {
activeColor: "#6A6A6A80",
inactiveColor: "#CACACA80",
ticks: {
gradient: { show: !1 }
}
}
}
}
}
})
}), { userOptionsVisible: R, setUserOptionsVisibility: Z, keepUserOptionState: ee } = st({ config: e.value }), { svgRef: U } = rt({ config: e.value.style.chart.title });
function j() {
const t = Y({
userConfig: A.config,
defaultConfig: Se
}), o = t.theme;
if (!o) return t;
if (!xe.value(t))
return Ie(t), t;
const a = Y({
userConfig: Ce[o] || A.config,
defaultConfig: t
});
return Y({
userConfig: A.config,
defaultConfig: a
});
}
ve(() => A.config, (t) => {
e.value = j(), R.value = !e.value.userOptions.showOnChartHover, T.value = e.value.style.chart.width, B.value = e.value.style.chart.height, se(), K.value += 1;
}, { deep: !0 });
const { isPrinting: te, isImaging: ae, generatePdf: oe, generateImage: le } = ot({
elementId: M.value,
fileName: e.value.style.chart.title.text || "vue-ui-tiremarks",
options: e.value.userOptions.print
}), ze = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), c = h(e.value.style.chart.animation.use ? 0 : Ve(H.value.percentage));
ve(() => H.value, (t) => {
e.value.style.chart.animation.use ? ne(t.percentage) : c.value = t.percentage || 0;
}, { deep: !0 }), Re(() => {
se();
});
function ne(t) {
let o = e.value.style.chart.animation.speed;
const a = Math.abs(t - c.value) / (o * 120);
function l() {
c.value < t ? c.value = Math.min(c.value + a, t) : c.value > t && (c.value = Math.max(c.value - a, t)), c.value !== t && requestAnimationFrame(l);
}
l();
}
const Te = d(() => !!e.value.debug);
function se() {
if (Ye(A.dataset) && qe({
componentName: "VueUiTiremarks",
type: "dataset",
debug: Te.value
}), e.value.responsive) {
const t = Qe(() => {
const { width: o, height: a } = Ze({
chart: O.value,
title: e.value.style.chart.title.text ? q.value : null,
source: W.value
});
requestAnimationFrame(() => {
T.value = Math.max(0.1, o), B.value = Math.max(0.1, a - 12);
});
});
S.value && (P.value && S.value.unobserve(P.value), S.value.disconnect()), S.value = new ResizeObserver(t), P.value = O.value.parentNode, S.value.observe(P.value);
}
ne(H.value.percentage || 0);
}
const F = d(() => e.value.style.chart.layout.display === "vertical"), v = d(() => {
const t = e.value.style.chart.percentage.show, o = {
top: t ? 48 : 12,
left: t ? 64 : 16,
right: t ? 64 : 16,
bottom: t ? 48 : 12
};
return F.value ? {
top: e.value.style.chart.percentage.verticalPosition === "top" ? o.top : 3,
left: 3,
right: 3,
bottom: e.value.style.chart.percentage.verticalPosition === "bottom" ? o.bottom : 3
} : {
top: 0,
bottom: 0,
left: e.value.style.chart.percentage.horizontalPosition === "left" ? o.left : 16,
right: e.value.style.chart.percentage.horizontalPosition === "right" ? o.right : 10
};
}), z = d(() => Object.values(v.value).reduce((t, o) => t + o, 0)), T = h(e.value.style.chart.width), B = h(e.value.style.chart.height), s = d(() => ({
height: B.value,
width: T.value
})), re = d(() => ({
horizontal: {
x: p.value.x + (e.value.style.chart.percentage.horizontalPosition === "left" ? 6 : 3),
y: s.value.height / 2 - p.value.fontSize / 2
},
vertical: {
x: s.value.width / 2 - 20,
y: p.value.y - p.value.fontSize / 2
}
})[e.value.style.chart.layout.display]), g = d(() => F.value ? {
mark: (s.value.height - z.value) / 100 * 0.5,
space: (s.value.height - z.value) / 100 * 0.5
} : {
mark: (s.value.width - z.value) / 100 * 0.5,
space: (s.value.width - z.value) / 100 * 0.5
}), ie = d(() => {
const t = [];
for (let a = 0; a < 100; a += 1) {
const l = e.value.style.chart.layout.ticks.gradient.show ? fe(e.value.style.chart.layout.activeColor, a / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.activeColor;
if (F.value) {
const m = e.value.style.chart.layout.crescendo ? (100 - a) * (s.value.width - v.value.left - v.value.right) / 100 / 3 : 0, y = v.value.left + 4 + m, w = s.value.width - v.value.right - 4 - m, $ = s.value.height - v.value.bottom - a * g.value.mark - a * g.value.space - g.value.mark, _ = s.value.height - v.value.bottom - a * g.value.mark - a * g.value.space - g.value.mark, x = (w - y) / e.value.style.chart.layout.curveAngleX, I = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100);
t.push({
x1: y,
x2: w,
y1: $,
y2: _,
curve: `M ${y} ${$} C ${y + x} ${$ - I}, ${w - x} ${_ - I}, ${w} ${_}`,
color: l
});
} else {
const m = e.value.style.chart.layout.crescendo ? (100 - a) * (s.value.height - v.value.top - v.value.bottom) / 100 / 3 : 0, y = v.value.left + a * g.value.mark + a * g.value.space - g.value.mark, w = y, $ = v.value.top + 4 + m, _ = s.value.height - v.value.bottom - 4 - m, x = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100), I = (_ - $) / e.value.style.chart.layout.curveAngleX;
t.push({
x1: y,
x2: w,
y1: $,
y2: _,
curve: `M ${y} ${$} C ${y + x} ${$ + I}, ${w + x} ${_ - I}, ${w} ${_}`,
color: l
});
}
}
return t;
}), p = d(() => {
let t, o, a;
const l = e.value.style.chart.percentage.fontSize / 3;
return F.value ? e.value.style.chart.percentage.verticalPosition === "top" ? (t = s.value.width / 2, o = v.value.top / 2, a = "middle") : e.value.style.chart.percentage.verticalPosition === "bottom" && (t = s.value.width / 2, o = s.value.height - v.value.bottom / 2 + l, a = "middle") : e.value.style.chart.percentage.horizontalPosition === "left" ? (t = 4, o = s.value.height / 2 + l, a = "start") : e.value.style.chart.percentage.horizontalPosition === "right" && (t = s.value.width - v.value.right + 8, o = s.value.height / 2 + l, a = "start"), {
x: t,
y: o,
textAnchor: a,
bold: e.value.style.chart.percentage.bold,
fontSize: e.value.style.chart.percentage.fontSize,
fill: e.value.style.chart.percentage.color
};
}), D = h(!1);
function ue(t) {
D.value = t, J.value += 1;
}
const E = h(!1);
function L() {
E.value = !E.value;
}
async function Be({ scale: t = 2 } = {}) {
if (!O.value) return;
const { width: o, height: a } = O.value.getBoundingClientRect(), l = o / a, { imageUri: m, base64: y } = await ut({ domElement: O.value, base64: !0, img: !0, scale: t });
return {
imageUri: m,
base64: y,
title: e.value.style.chart.title.text,
width: o,
height: a,
aspectRatio: l
};
}
const De = d(() => e.value.style.chart.backgroundColor), Ee = d(() => e.value.style.chart.title), { exportSvg: Ne, getSvg: Me } = lt({
svg: U,
title: Ee,
backgroundColor: De
});
async function ce({ isCb: t }) {
if (t) {
const { blob: o, url: a, text: l, dataUrl: m } = await Me();
e.value.userOptions.callbacks.svg({ blob: o, url: a, text: l, dataUrl: m });
} else
Ne();
}
return we({
getImage: Be,
generatePdf: oe,
generateImage: le,
generateSvg: ce,
toggleAnnotator: L,
toggleFullscreen: ue
}), (t, o) => (r(), i("div", {
ref_key: "tiremarksChart",
ref: O,
class: V(`vue-data-ui-component vue-ui-tiremarks ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
style: X(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
id: M.value,
onMouseenter: o[0] || (o[0] = () => n(Z)(!0)),
onMouseleave: o[1] || (o[1] = () => n(Z)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), N(n($e), {
key: 0,
svgRef: n(U),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: E.value,
onClose: L
}, {
"annotator-action-close": f(() => [
u(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": f(({ color: a }) => [
u(t.$slots, "annotator-action-color", b(C({ color: a })), void 0, !0)
]),
"annotator-action-draw": f(({ mode: a }) => [
u(t.$slots, "annotator-action-draw", b(C({ mode: a })), void 0, !0)
]),
"annotator-action-undo": f(({ disabled: a }) => [
u(t.$slots, "annotator-action-undo", b(C({ disabled: a })), void 0, !0)
]),
"annotator-action-redo": f(({ disabled: a }) => [
u(t.$slots, "annotator-action-redo", b(C({ disabled: a })), void 0, !0)
]),
"annotator-action-delete": f(({ disabled: a }) => [
u(t.$slots, "annotator-action-delete", b(C({ disabled: a })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : k("", !0),
ze.value ? (r(), i("div", {
key: 1,
ref_key: "noTitle",
ref: Fe,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : k("", !0),
e.value.style.chart.title.text ? (r(), i("div", {
key: 2,
ref_key: "chartTitle",
ref: q,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(r(), N(it, {
key: `title_${K.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)) : k("", !0),
e.value.userOptions.show && Pe.value && (n(ee) || n(R)) ? (r(), N(n(_e), {
ref: "details",
key: `user_options_${J.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: n(te),
isImaging: n(ae),
uid: M.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: D.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: O.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: E.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: ue,
onGeneratePdf: n(oe),
onGenerateImage: n(le),
onGenerateSvg: ce,
onToggleAnnotator: L,
style: X({
visibility: n(ee) ? n(R) ? "visible" : "hidden" : "visible"
})
}, Ue({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: f(({ isOpen: a, color: l }) => [
u(t.$slots, "menuIcon", b(C({ isOpen: a, color: l })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: f(() => [
u(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: f(() => [
u(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: f(() => [
u(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: f(({ toggleFullscreen: a, isFullscreen: l }) => [
u(t.$slots, "optionFullscreen", b(C({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: f(({ toggleAnnotator: a, isAnnotator: l }) => [
u(t.$slots, "optionAnnotator", b(C({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
]),
key: "5"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : k("", !0),
(r(), i("svg", {
ref_key: "svgRef",
ref: U,
xmlns: n(We),
class: V({ "vue-data-ui-fullscreen--on": D.value, "vue-data-ui-fulscreen--off": !D.value }),
viewBox: `0 0 ${T.value} ${B.value}`,
style: X(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
}, [
je(n(Oe)),
t.$slots["chart-background"] ? (r(), i("foreignObject", {
key: 0,
x: 0,
y: 0,
width: s.value.width,
height: s.value.height,
style: {
pointerEvents: "none"
}
}, [
u(t.$slots, "chart-background", {}, void 0, !0)
], 8, dt)) : k("", !0),
e.value.style.chart.layout.curved ? (r(), i("g", ft, [
(r(!0), i(he, null, de(ie.value, (a, l) => (r(), i("path", {
d: a.curve,
"stroke-width": g.value.mark,
stroke: c.value >= l ? a.color : e.value.style.chart.layout.inactiveColor,
"stroke-linecap": "round",
fill: "none",
class: V({ "vue-ui-tick-animated": e.value.style.chart.animation.use && l <= c.value })
}, null, 10, gt))), 256))
])) : (r(), i("g", yt, [
(r(!0), i(he, null, de(ie.value, (a, l) => (r(), i("line", {
x1: a.x1,
y1: a.y1,
x2: a.x2,
y2: a.y2,
"stroke-width": g.value.mark,
stroke: c.value >= l ? a.color : e.value.style.chart.layout.inactiveColor,
"stroke-linecap": "round"
}, null, 8, pt))), 256))
])),
e.value.style.chart.percentage.show ? (r(), i("g", mt, [
n(Q) ? (r(), i("rect", {
key: 0,
x: re.value.x,
y: re.value.y,
width: 40,
height: p.value.fontSize,
fill: "#6A6A6A80",
rx: 3
}, null, 8, kt)) : (r(), i("text", {
key: 1,
x: p.value.x,
y: p.value.y,
"font-size": p.value.fontSize,
fill: e.value.style.chart.layout.ticks.gradient.show && e.value.style.chart.percentage.useGradientColor ? n(fe)(e.value.style.chart.layout.activeColor, c.value / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.percentage.color,
"font-weight": p.value.bold ? "bold" : "normal",
"text-anchor": p.value.textAnchor
}, Le(n(Je)(
e.value.style.chart.percentage.formatter,
c.value,
n(Ke)({
v: c.value,
s: "%",
r: e.value.style.chart.percentage.rounding
})
)), 9, bt))
])) : k("", !0),
u(t.$slots, "svg", { svg: s.value }, void 0, !0)
], 14, ht)),
t.$slots.watermark ? (r(), i("div", Ct, [
u(t.$slots, "watermark", b(C({ isPrinting: n(te) || n(ae) })), void 0, !0)
])) : k("", !0),
t.$slots.source ? (r(), i("div", {
key: 5,
ref_key: "source",
ref: W,
dir: "auto"
}, [
u(t.$slots, "source", {}, void 0, !0)
], 512)) : k("", !0),
n(Q) ? (r(), N(at, { key: 6 })) : k("", !0)
], 46, vt));
}
}, wt = /* @__PURE__ */ ct(At, [["__scopeId", "data-v-f47e75c9"]]), Mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: wt
}, Symbol.toStringTag, { value: "Module" }));
export {
Nt as a,
Mt as b,
wt as v
};